Skeleton
Usage
A placeholder in the shape of the content that is loading. Distinct from Wireframe, which marks a component that does not exist yet — this one marks content that has not arrived yet. Because it occupies the final layout, content does not jump when it resolves.import { Skeleton } from '@summonware/ui';Best practices
DoMatch the real layout. A skeleton whose shape differs from the loaded content causes the shift it exists to prevent.
DoUse `variant="text"` for prose — the shortened last line reads as a paragraph rather than a box.
Don'tAnimate for more than a few seconds. Past that the request has probably failed and needs an error state.
Examples
Common configurations, variations and states.Variants
The four shapes. Note the text variant ends short — a uniform block reads as a box, a short last line reads as prose.
Card skeleton
Composed to match a loading card — an avatar row above a paragraph. Compose primitives rather than reaching for a preset.
List skeleton
Repeated rows standing in for a list that is still loading.
Reference variants
3 of 9 labels from the reference are demonstrated above.Card SkeletonProfile Card SkeletonList SkeletonTable SkeletonProduct Card SkeletonToggle Loading DemoWeb DevelopmentMobile AppsCloud Services