# 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.

*Tags: ux, technique, ui-design, product-design, development*

---


> [!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](/concepts/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](/techniques/optimistic-updates-rollback/).
- **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](/concepts/skeleton-vs-optimistic-ui/).
- **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](/concepts/perceived-performance-design/).

### 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

- **NNGroup:** [Response Times - The 3 Important Limits](https://www.nngroup.com/articles/response-times-3-important-limits/)
- **Luke Wroblewski:** [Skeleton Screens for Perceived Performance](https://www.lukew.com/ff/entry.asp?1797)
- **Smashing Magazine:** [Designing for the Unconnected and Slow Loading](https://www.smashingmagazine.com/2021/01/performance-budgeting-web-projects/)
- **Articles:** [Everything you need to know about Loading UX](https://uxdesign.cc/everything-you-need-to-know-about-loading-states-9a3e8e3e8e3)
---
[[skeleton-vs-optimistic-ui]]
[[status-awareness]]
[[perceived-performance-design]]
[[optimistic-updates-rollback]]
[[visual-vs-dom-hierarchy]]


---

Source: https://www.fernandoux.com/en/wiki/techniques/loading-states/