Skeletons that hold the layout
The point is that nothing moves when the content arrives — which only works if the placeholder is the size of the real thing.
Skeletons that hold the layout
The point of a skeleton is that nothing moves when the content arrives. That only works if the placeholder is the size of the thing it is standing in for.
What makes a skeleton work
It has to match the layout. A skeleton that is the wrong height causes exactly the layout shift it was meant to prevent, and the reader gets both a wait and a jump.
It is decoration. The shapes get aria-hidden and a single role="status" with real text carries the message. Without that a screen-reader user hears nothing while the page appears to be doing something.
The shimmer is optional. A static skeleton communicates just as well and costs nothing to paint. The shimmer is a convention, not a requirement, and under reduced motion it goes entirely.
Skeletons beat spinners for known layouts
When you know what is coming — an article, a list of cards — a skeleton tells the reader the shape of it and keeps the page stable. A spinner tells them only that something is happening.
When you do not know, or the wait is genuinely indeterminate, a spinner is honest and a skeleton is a lie about a layout you cannot promise.
Do not skeleton everything
A page made entirely of grey rectangles for two seconds is not obviously better than a blank page for two seconds. Skeleton the part that is loading and leave the shell that is already there.