# Skeleton or Spinner
> Match the loading treatment to the wait: nothing under a beat, structure for seconds, progress for longer.

## Situation

Do you know what’s coming, and how long is the wait?

## Decision

### Use Skeleton when

You know the layout that’s coming and the wait runs a few seconds. Holding the structure steady lets content land where the eye already is.

- Predictable layout: lists, cards, profiles
- First load of a page or view
- Roughly one to ten seconds
- A layout jump would be jarring

### Use Spinner when

The wait is short or the result has no predictable shape, like a submit or a search. Delay it by a few hundred milliseconds so fast responses never flash.

- Unknown result layout
- An action in progress, not a page loading
- Roughly one to three seconds
- Small spaces, like inside a button

**The numbers:** Under 1 s: show nothing, and delay any indicator by about 300 ms so fast responses never flash. 1–10 s: skeleton if the layout is known, spinner if not. Over 10 s: real progress, and let people keep working.

## Why

This view loads in two to four seconds and we know its layout, so a skeleton keeps the page steady and makes the wait feel shorter than a spinner would.

## Edge cases

If the data usually arrives in under half a second, a skeleton becomes a flicker. Delay it, or show nothing at all.

Source: https://www.designdecisions.dev/cards/skeleton-spinner
Author: Alex Dovhyi