Skip to content
UX Atlas
PatternCraft conventionFoundational

Loading States

What to show while waiting, chosen by how long the wait is and whether its length is known.

Definition

A loading state communicates that work is in progress. The right treatment depends on duration, on whether progress is measurable, and on whether the user can do anything else meanwhile.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Choosing the treatment
  3. Details that matter
  4. In practice
  5. Continue from here

Choosing the treatment

DurationTreatment
Under 300msNothing. Delay any indicator so fast responses never show one.
300ms to 1sSubtle inline indicator, or an optimistic update.
1s to 5sSkeleton matching the final layout.
5s to 30sDeterminate progress with a description of the current step.
Over 30sBackground job with a status surface and a notification when done.
Unknown durationIndeterminate indicator plus a clear description of what is happening.

Details that matter

  • Delay the indicator by 200 to 400ms, then hold it for a minimum of about 500ms to prevent flicker.
  • Skeletons should match the real layout, or the content shifts when it arrives and produces layout instability.
  • Preserve scroll position when content loads in place.
  • Announce loading and completion to assistive technology, since a visual spinner conveys nothing to a screen reader.
  • Disable the triggering control while its operation is running, to prevent double submission.
  • Always provide a failure path. A spinner that never resolves is the worst possible state.

In practice

Skeletons that do not match

A common failure

A three-line skeleton replaced by a single line of content shifts the layout on arrival, which is worse than showing nothing. The skeleton has to be built from the same layout as the content.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A CheckoutA DashboardA Data TableA Mobile AppAn AI ProductAn Onboarding FlowAuthentication

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.

Alternative approach

A different answer to the same problem, with a different cost.

  • Optimistic UIPattern

    Optimistic UI removes the wait instead of decorating it, and pays for it in rollback complexity.

Commonly confused with

Close enough to be mixed up, different enough to matter.

  • Empty StatesPattern

    An empty result and an unfinished request look identical if you let them, and need opposite copy.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.