Design systemLoading
Skeletons when the layout is known, a spinner when it is not, and progress on the button that started the work.
<div className="card">
<Skeleton width="40%" height={14} />
<Skeleton width="85%" height={20} className="mt-3" />
<Skeleton width="70%" height={14} className="mt-2" />
</div>
<Spinner size={20} />
<span>Running step 3 of 5</span>
<Button variant="primary" label={busy ? "Publishing…" : "Publish"} disabled={busy} />Click Publish in the example to see the button state.
Which to use
| Situation | Use |
|---|---|
| A page or card whose shape is known | Skeleton blocks in the same layout |
| Work of unknown length, such as an agent running | Spinner with a line saying what is happening |
| An action someone just started | The button's own label ("Publishing…"), disabled until done |
| Something that takes more than a few seconds | Show steps ("Running step 3 of 5"), not only a spinner |
Rules
- Do not show a spinner for anything that finishes in under about 300ms.
- Keep what is already on screen while new data loads. Replace it, do not blank the page.
- When the work finishes, confirm it: the result appears, or a toast says it is done.