Skeleton
A pulsing placeholder that holds the shape of content still loading, so the page does not jump when the data lands.
import from ~/components/ui/skeleton
Shapes
shape='block' | 'circle' | 'text'
Pick the silhouette with the variant. A circular avatar placeholder no longer needs a rounded-full override, which is exactly what the variant was added for.
An avatar row
the case the circle shape exists for
A round avatar beside two lines of text. Before shape='circle' this row had to be drawn with a square, because rounding it from the call site is a restyle.
The shapes we actually load with
a page's worth
Each stands in for a real piece of content: a heading, a paragraph, an avatar, a thumbnail.
A loading endeavor card
composed loading state
The placeholder mirrors the card it replaces, block for block, so nothing moves when the data lands.
A loading list
repeated rows
Load the number of rows you expect, not one. Three to five reads as a list; one reads as a bug.
Rules
Do
Don't