Loading
Which indicator to show while something loads, and when to show none at all.
Loading feedback tells a user the app is currently working for them. The right choice of indicator depends on what's loading and for how long.
How to choose a loading indicator
| Situation | Use |
|---|---|
| Content whose shape is known | Skeleton, shaped like the content |
| An action started from a button | Spinner inside the Button, which is disabled with a present-tense label |
| A job with a known length | Progress with the percentage beside it |
| Work that outlasts the screen | Sonner with toast.promise, so the user keeps working |
The expected completion time and the situation set the choice.
Example
Do and Don't
Do
- If an action is expected to complete in under about 300ms, don't show any loading indicator.
- Shape the skeleton like the content it replaces, so nothing jumps when the content arrives.
- Keep a label in the button that says what's in progress, such as
SavingorIngesting. - Let the words carry the state, such as
SavingorUploading.
Note: under reduced motion, spinners stop turning and skeletons stop pulsing (see Motion).
Don't
- Let an animation be the only sign that something is happening.
- Replace a button's label with a spinner.
Where it should not be used
- There's nothing to load: show an Empty state. See Empty states.
- Something failed: show an Alert that says what to fix.