Reference · Components and layout
Loading
This is a spec: descriptive guidance, not a checkable rule. It carries no forbidden and instead pair, and no jig check detector applies to it directly.
The spec
Choose by *what is unknown*, not by preference.
| Situation | Use |
|---|---|
| Shape of the result is known | Skeleton matching the real layout |
| Shape is unknown | Spinner, centred in the region it will fill |
| Under ~200ms expected | Nothing. A flash of loading is worse than a brief wait |
| Over ~10s, or a job | Progress with a stage label, and what happens if they leave |
| User-initiated, reversible, high confidence | Optimistic update with rollback on failure |
Rules
- Load into the region that will hold the result, never a full-page overlay for a partial update.
- Skeletons match the real content's dimensions, or the layout jumps on arrival.
- A control that triggered loading enters its own loading state (
P-02) and stays the same width. - Never animate a skeleton faster than
--duration-slow; a pulsing grid is more distracting than a static one. - Announce completion with
aria-livewhen focus is elsewhere (E-35).
- Kind
- Spec
- Section
- Components and layout