Placeholder
Also known as: Skeleton, Loading state
Resources
Properties
| Property | Values | Default |
|---|---|---|
Shape Variant | Square | Circle | Square |
Best practises
- Mimic the content: Placeholders should be used to represent the structure of the content while it is loading. They should match the layout and proportions of the final content, maintaining consistency in spacing and alignment.
- Keep it lightweight: Avoid creating overly detailed placeholder designs. Use placeholders to cover essential content only, nothing too complex. This ensures a smooth transition once the actual content loads.
When to use
When content is loading or data is being fetched and a visual cue is needed to indicate that something is coming soon.
When there is a need to maintain layout structure and prevent page shifts while content is loading.
When content is quickly available or loads almost instantly.
When the layout itself changes significantly based on the content, as placeholders could cause a mismatch in visual expectations.