Is documented
The component is fully documented
The purpose of skeletons is to provide a visual indication of ongoing loading, reducing perceived waiting time and improving the user experience. By showing a skeleton representation of the content, users can anticipate and understand the structure of the upcoming information.
Skeletons mimic the layout and structure of the expected content, but with simplified or stylized representations. They consist of simple shapes that give users a sense of the content's location and size.
Anatomy
The anatomy of a Skeleton differs depending on the intended user interface, an example below.
- Placeholder. Covering the line-height of a heading using color-base-300.
- Placeholder. Covering the space of an icon using color-base-300.
- Placeholder. Covering the line-height of a subheading using color-base-300.
- Placeholder. Covering the line-height of a description using color-base-300.
Component Health
Component checklist
Figma component
Includes a link to a Figma component that has been imported to Supernova
Status
The component has a health status indicated
Healthy
Repository
Includes a link to an external code repository