Skeleton Block – a placeholder for content that is still loading¶
The skeleton draws neutral shapes in the rough form of content that is not there yet – lines of text, a picture, an avatar, rows of a list – which pulse or shimmer until the content arrives. It avoids an empty spot that makes the form jump, and a spinner that says nothing about what is coming.
This page is part of the form block reference.
1. At a glance¶
| Purpose | Placeholder shapes while content is missing |
| Typical use | A summary or a result that an action fills in after the form was opened |
| Related | Progress Block (indeterminate), Label Block |
The skeleton knows nothing about loading. It is shown and hidden with its "Visible" condition: true exactly while the content is missing. The real block beside it gets the opposite condition.
2. Settings¶
| 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 – lines of text, rows of a list, avatars. At most 50. | 3 for Text, 1 otherwise |
| "Screen Reader Text" | What a screen reader announces while the skeleton is shown. It is never drawn. | "Loading" |
| "Horizontal" (Layout) | Shapes side by side instead of under each other | off |
| "Gap" (Layout) | Space between the shapes | 0.5rem for Text, 0.75rem otherwise |
| "Shape Height" (Size) | Height of each shape – of every line for Text, the diameter for Circle | 0.75rem per line, 2.5rem for a circle, 8rem for a single rectangle, 3rem for each of several |
| "Shape Width" (Size) | Width of each shape | full width, or an equal share with "Horizontal" |
| "Last Line Width" (Size) | Text with several lines only: width of the last line | 60% |
| "Shape Color" (Appearance) | Color of the shapes | a neutral surface color of the theme (light and dark mode) |
A plain number in a length means pixels. The "Background Color", padding and border of the settings every block has frame the shapes like a card; they do not color the shapes.
3. Behaviour¶
- Size it like the content it stands in for – that is the whole point: nothing moves when the skeleton is replaced. Give each shape its size with "Shape Height" and "Shape Width", or give the block a height: rectangles without a shape height then share it.
- A circle is always as wide as it is high.
- Users whose system asks for reduced motion always see a still skeleton.
- A skeleton without a "Visible" condition never disappears. Do not build a "Loading…" label instead: its text is never as long as the real one, so the form still jumps.
4. Example¶
Summary that is filled later. The field "AI Summary" is filled by an action after a ticket was
created. A skeleton with "Variant" = Text, "Count" = 4 and "Visible" = "AI Summary is
empty" stands above a label showing the summary, whose "Visible" condition is the opposite.
5. Limitations¶
- The skeleton is only replaced when the form is evaluated again with the new value. A form does not notice by itself that a background process changed the record while it is open; the change appears when the record is refreshed (for example with the "Refresh" button of a Toolbar Block) or opened again. An action that fills the field in the user's own session updates the form directly.