Loading States: The Indulgent Wait in UX

Learn to design loading states that reduce user anxiety, communicate system progress, and improve the perceived speed of your digital product.

info Quick Definition
A Loading State is the visual or audible information shown to the user while the system processes an action (e.g., loading data from a server, uploading a file, or performing a search). Good loading design eliminates the fear of a “frozen system.”

Why Loading States are Critical

The moment a user clicks a button and waits for a response is the time of greatest vulnerability and potential frustration. Without a clear loading state, the user doesn’t know if:

  1. The system has received their command.
  2. Their internet connection has dropped.
  3. The application has crashed or frozen.

Good loading design keeps Status Awareness alive and reduces cognitive load.

3 Loading Strategies based on Wait Time

The type of loading indicator you choose should depend on how long the user must wait:

1. Instant Wait (< 1s)

  • Indicator: A subtle cursor change (system spinner) or an Optimistic Update.
  • Goal: Confirm that the action has been registered without interrupting the visual flow.

2. Short Wait (1s - 5s)

  • Indicator: An in-line spinner inside the button, a generic loading bar, or a Skeleton Screen.
  • Goal: Show that the system is actively working and that “something is coming.”

3. Long Wait (> 5s)

  • Indicator: A progress bar with percentage (%) or a notification of estimated time to completion.
  • Goal: provide certainty and allow the user to do something else while the process finishes (e.g., “We’ll notify you when we’ve finished uploading your files”).

Visual Loading Patterns

A. Spinners (Rotating)

The classic rotating icon. Should be used for atomic and quick actions. Do not use it for loading a full page; it generates anxiety after 2 seconds.

B. Skeleton Screens

Placeholders that mimic the shape of the final content. It is the gold standard for Perceived Performance.

C. Progress Bars

The best ones are those that do not progress linearly. A bar that advances quickly at the beginning and slows down at the end better simulates system effort and is perceived as faster.

D. Staggered Loading

Load text first, then low-resolution images, and finally heavy content. The user can start reading immediately while the rest completes.

Accessibility in Loading States

Don’t forget users who cannot see the screen:

  • ARIA Live Regions: Use attributes like aria-busy="true" so the screen reader announces that content is changing.
  • Auditory Microinteractions: In critical apps (banking or medical), a subtle sound when a load finishes can be very helpful.

Mentor’s Tips

  • Avoid “Layout Shift”: Ensure the loading container has the same size as the final content. Otherwise, page elements will jump abruptly when loading finishes, creating a poor experience and SEO penalty (Core Web Vitals).
  • Report Errors: If loading fails due to lack of connection, don’t leave the spinner rotating infinitely. Show a clear error message with a “Retry” button.
  • Humanize the Wait: If the wait is inevitably long, take the opportunity to show tips, fun quotes, or interesting facts related to your product. Make the wait part of the brand.

Useful Resources and Tools

skeleton-vs-optimistic-ui status-awareness perceived-performance-design optimistic-updates-rollback visual-vs-dom-hierarchy