Skeleton
Introduction
The Skeleton component is a high-performance placeholder element used to indicate that content is currently loading. By rendering layout-mocking geometric placeholders, it prevents sudden content shifts when remote data loads.
The component supports distinct geometric formats (including text columns, square blocks, and circle profile avatars) along with responsive animation loops (such as glowing or pulsing transitions) directly through visual configurations.
Usage
You can construct mockup states for cards, profiles, and listings like following:
1. Multi-line Text Block Placeholder
Mock a paragraph or description field while waiting for article text to load. This renders multiple stacked columns with a subtle pulsing cycle automatically.
{
"type": "skeleton",
"shape": "text",
"noOfLines": 3,
"variant": "pulse"
}
2. Avatar Circle Placeholder
Renders a circular shape matching profile pictures or user avatar icons. Combine this with text skeletons to mock user headers.
{
"type": "skeleton",
"shape": "circle",
"variant": "pulse"
}
3. High-Shine Box Container (Card Mockup)
Features a rectangular box container with a high-shine diagonal shimmer reflection animation, ideal for media cards or banner mockups.
{
"type": "skeleton",
"shape": "box",
"variant": "shine"
}
4. Loaded State Content Toggle
Once data finishes loading on client machines, setting loaded to true instantly reveals nested children blocks (such as a Heading or real Card) and stops rendering the placeholder background.
{
"type": "skeleton",
"loaded": true,
"children": [
{
"blockType": "heading",
"text": "Account Connected",
"size": "sm"
},
{
"blockType": "text",
"content": "API key sync complete."
}
]
}
Account Connected
API key sync complete.
Props
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Shape (shape) | select | "box" | The geometric format representing the loading resource. • Options: "box" (for cards/images), "circle" (for avatars), "text" (for paragraph columns). |
Animation Variant (variant) | select | "pulse" | The animation styling. • Options: "pulse" (gradual glow loop), "shine" (diagonal shimmer reflection), "none" (static neutral fill). |
Line Count (noOfLines) | number | 3 | Total number of row columns to display when shape is set to "text". |
Loaded State (loaded) | boolean | false | When true, skips skeleton masking and directly displays child components. |
Children Blocks (children) | list | - | Nested page builder components that remain hidden until loaded turns true. |
Architecture Notes
- Zero Layout Shifts: Geometric sizing parameters (like CSS grid height and width) are parsed on the server before client-side hydration. This preserves proportional layout boundaries and avoids cumulative layout shifts (CLS).
- GPU-Accelerated Shimmer: High-shine reflections and glowing pulse loops utilise high-performance CSS transforms. This guarantees 60fps animations even on lower-end mobile devices.
- Dynamic Content Mapping: Wrapping components with a Skeleton lets developers fetch client-side data feeds asynchronously, safely transitioning elements from placeholders to visible states seamlessly.