ui patterns
Skeleton screen
What is a skeleton screen?
A skeleton screen is a placeholder that shows the shape of content while it loads - grey blocks where text and images will appear - instead of a spinner or blank. It makes the same wait feel shorter by showing progress toward something specific.
Also known as: skeleton loader, loading placeholder
Prefer to watch?
Watch the recap 0:34
The demo
A profile card that takes the same moment to load either way. Reload it with a spinner, then with a skeleton, and notice which wait feels shorter - the clock says they're identical.
Reload it in each mode and compare how the wait feels.
What this demo shows (text version)
A profile card that loads on demand, taking the same fixed time each reload. In spinner mode the wait is filled with a spinning loader over a blank area; in skeleton mode it's filled with grey placeholder blocks shaped like the avatar, name and lines of text that are about to appear. Both then resolve to the identical card.
The load time is the same in both modes, but the skeleton version tends to feel faster because it shows the page taking shape and implies progress toward a specific result, rather than an indeterminate spinner. That is a perceived-performance gain, achieved purely by what is shown during the wait.
A skeleton screen fills a load with grey blocks shaped like the content to come, instead of a spinner or blank. It can’t make the wait shorter, but by showing progress toward something specific it makes the same wait feel faster - and the page feel like it’s already arriving.
The spinner and the skeleton took exactly the same time, but the skeleton felt quicker - because it showed the page taking shape rather than a wheel going nowhere. That gap between actual and perceived wait, bought purely with what you show during the load, is the whole point.
Skeletons work because they set an expectation and imply progress: the layout is already there, just unfilled, so the brain reads "nearly ready" instead of "stuck". They suit content with a predictable shape - feeds, profiles, cards. For a quick, indeterminate wait a spinner is fine; for a very long job, real progress (a percentage, a step count) beats both.
Don't let the skeleton lie. If it never resolves, or its shape doesn't match what arrives, you've replaced honest waiting with a tease - worse than a spinner. And keep it calm: a frantic shimmer is its own kind of noise, and must respect reduced-motion. The skeleton is a promise about what's coming; keep it.