What is a Loading State?

TL;DR

• A loading state communicates that the system is working and the result is not ready yet.
• Different waits need different feedback: spinner, skeleton, progress bar, status message, or optimistic update.
• Loading feedback reduces repeated actions and uncertainty.
• Long waits should communicate progress or expectations when possible.
• A loading state should transition clearly into success or failure.

Why do loading states matter?

If a user taps “Pay” and the screen appears frozen, they may tap again, leave, or assume the product failed.

A clear loading state confirms that the action was received and tells the user the system is still working.

Common loading patterns

Spinner

Useful for short, indeterminate waits.

Skeleton screen

Useful when the layout is known but content is still arriving.

Progress indicator

Better for longer operations where progress can be measured, such as uploads.

Status message

Useful when the operation has meaningful phases like “Uploading,” “Processing,” and “Finalizing.”

Optimistic UI

The interface updates immediately while the system completes the action in the background. Use it only when rollback is safe and understandable.

Loading state vs. disabled state

A loading state communicates active processing. A disabled state communicates that an action is currently unavailable.

A button may be both visually disabled and loading, but the meaning should remain clear.

How do teams design loading states?

1. Estimate how long the operation normally takes.
2. Decide whether progress is measurable.
3. Prevent duplicate actions where necessary.
4. Preserve enough context so users know what is loading.
5. Define the success and error transitions.
6. Handle unusually long waits and timeouts.

Common mistakes

Using a spinner for everything

Long or complex tasks often need more informative feedback.

Blocking the whole screen unnecessarily

Let users continue unrelated work when the operation allows it.

Never defining timeout behavior

Loading cannot remain indefinite.

The bottom line

A loading state answers: did the product receive my action, what is happening now, and when can I expect the next state?

Related terms

Product state · Error state · Empty state · Interaction design

Relevant Figr resource

Read Prototyping UX Design for state-aware interaction examples.