Skeleton Block – a placeholder while content is loading¶
The skeleton draws neutral shapes in the rough form of content that is not there yet – lines of text, a picture, an avatar, the rows of a list. They pulse or shimmer until the real content takes their place. This avoids an empty spot that makes the dashboard jump when the content arrives.
This page is part of the widget reference.
1. At a glance¶
| Purpose | A placeholder for content that is still loading |
| Typical use | In place of a widget whose content depends on a value that is set later |
| Related | the "Visible" condition every widget has |
The skeleton knows nothing about loading. Give it a "Visible" condition that is true exactly while the content is missing, and put the real widget next to it with the opposite condition.
2. Settings¶
In addition, the widget has the settings every widget has, except "Auto Refresh".
| Setting | Meaning | Default |
|---|---|---|
| "Variant" | The shape: Text (lines, the last one shorter), Rectangle, Rounded, Circle | Text |
| "Animation" | Pulse, Wave or None | Pulse |
| "Count" | How many shapes are drawn (at most 50) | 3 lines for Text, 1 shape otherwise |
| "Screen Reader Text" | What a screen reader announces; it is never drawn | "Loading" |
| "Horizontal" | Lays the shapes out side by side | off |
| "Gap" | Space between the shapes as a CSS length | 0.5rem for Text, 0.75rem otherwise |
| "Shape Height" | Height of each shape – of each line for Text, the diameter for Circle | 0.75rem per line, 2.5rem for a circle, 8rem for one rectangle, 3rem for each of several |
| "Shape Width" | Width of each shape | the full width, or an equal share when horizontal |
| "Last Line Width" | Only for Text with several lines: the width of the last line | 60% |
| "Shape Color" | Colour of the shapes | a neutral surface colour of the theme |
3. Behaviour¶
- Users who asked their operating system for reduced motion always get a still skeleton.
- The background colour of the widget is the area behind the shapes, not the shapes themselves.
- Size the skeleton like the content it stands in for, so nothing moves when they swap.
4. Example¶
A list that appears after a selection. A skeleton with "Variant" Rounded, "Count" 4 and "Visible" "no project selected yet"; beside it the query result grid with the opposite condition.