Feedback
Skeleton
A skeleton is composed rather than configured: it is one shape with a shimmer, and you stack copies of it to sketch the layout that is coming. That is deliberate, because a skeleton only earns its place if it matches the real thing closely enough that nothing shifts when the content lands. It is hidden from assistive technology, so the loading state gets announced once by the region rather than shape by shape.
npx shadcn@latest add @minflow/skeletonWhere to use it
- First loads of a layout whose shape you already know: list rows, profile headers, media cards.
- Never for a refetch of content already on screen; leave the old content in place and let a spinner carry the work.
- Never where the incoming shape is unknown, because a skeleton that guesses wrong moves the page twice.
Variations
Text lines
Paragraphs and descriptions. Vary the last line's width, because a block of identical bars reads as a chart rather than as text.
List row
Feeds, member lists, anything with an avatar and two lines. Repeat the row for as many items as the real response will hold.
Media and text
Cards and previews where an image block loads alongside its caption. Match the media block's radius to the real one so the swap is invisible.