Skeleton
A skeleton acts as a placeholder for content, usually while the content loads.
When to use
- Content that is loading and whose shape you already know, such as a list of rows or a profile card.
- A load long enough to see but short enough to wait through.
- Anywhere a spinner would leave the layout empty and let it jump when the content lands.
When not to use
- Content whose shape you cannot predict. A skeleton that does not match what arrives is worse than no skeleton.
- A load that finishes almost at once, where the placeholder only flickers.
- An action in progress, such as a save. That is a spinner or a progress bar.
- An error or an empty result. Say so in words instead of leaving a shape that will never fill.
Guidance
Do
Match the placeholder to the content it stands for, so nothing moves when the real thing arrives.
Don't
Do not use shapes that do not match what is coming. The layout jumps on arrival and the wait was spent on a lie.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| skeleton | neutral | 0.042Ambient | 0.066Substrate |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.