Components / Feedback
Skeleton
stableA loading placeholder shaped like the content that’s about to appear — reduces layout shift and signals progress.
Shapes
In context — a loading table row
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | 'text' | 'circle' | 'rect' | 'text' | No | Shape of the placeholder. |
width | number | string | — | No | Overrides the default width. |
height | number | string | — | No | Overrides the default height. |
Do
- Match the skeleton’s shape and size to the real content it’s standing in for.
- Replace it the instant real data arrives — never leave it showing after load.
Don't
- Use a spinner and a skeleton for the same loading state — pick one per component.
- Use skeletons for anything that loads in under ~200ms — it reads as a flicker, not a signal.