Skeleton
A skeleton is a placeholder for content, usually shown while the content loads.
When to use
- Loading content when you already know its shape, such as a list of rows or a profile card.
- A short wait that is still long enough to notice.
- Anywhere a spinner would leave the layout empty, then make it jump when the content appears.
When not to use
- Content when you do not know its shape. A skeleton that does not match the content is worse than none.
- A load that finishes almost at once. The placeholder only flickers.
- An action in progress, such as a save. Use a spinner or a progress bar.
- An error or an empty result. Say so in words, instead of showing a placeholder that will never fill.
Guidance
Do
Match the placeholder to the content it replaces, so nothing moves when the content loads.
Don't
Do not use shapes that do not match the content. The layout jumps when the content loads.
Intensity
How much attention each of this component's grounds uses, scored 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. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. See intensity.