ui patterns
Skeleton screen
What is a skeleton screen?
A skeleton screen is a placeholder that mimics the shape of content while it loads - grey blocks where the text and images will be - instead of a spinner or a blank. It makes the same wait feel shorter by showing progress toward something specific.
Also known as: skeleton loader, loading placeholder
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.
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.