211
skeleton screen
A placeholder shaped like the content, shown while loading. Not a spinner in a void, and not a fake version of the data.
What is skeleton screen?
A skeleton is a non-interactive gray of the layout that matches the loaded screen, so layout does not jump. It is a loading state. It must not be readable as real content, and it must end in content, empty, or error — not spin forever.
Why does skeleton screen matter when vibe coding?
Models center a spinner, or they skeleton a page that is already client-only and fast, adding noise. Name skeleton only when the wait is visible and the shape is stable.
How do you do skeleton screen?
Skeleton matches the real layout. Replace it with data, empty, or error. Do not animate it frantically. Do not use it for actions that take under a beat — a button’s own busy state is enough.
How do you ask a model for skeleton screen?
While (view) loads, show a skeleton shaped like the final layout, not a lone spinner. Then show data, empty, or error. Do not shift the layout when data arrives. Do not skeleton an instant action.
What goes wrong with skeleton screen?
Skeletons that never resolve because the error state was not designed. The gray blocks become the product.