Skeletons act as placeholder previews for UI elements so that users are provided with a structure of a loading page. This helps users to anticipate where and what types of content are loading.
When to use
Skeletons are used on all pages to provide a visual layout of the content being loaded. They help users perceive a loading period as being shorter in duration.
When not to use
Skeletons should not be used if:
- The data or elements being loaded are unknown.
- The user is awaiting feedback for in-context actions such as submitting a form or fetching search results.
- The Spinner component may be more appropriate.
- The loading process takes more than a few minutes to load.
- Pair with a message or notification to provide the user with better visibility of a system’s status.
Skeletons come in three different shapes - circular, rounded, and rectangular. The shape, size, and elevation of a Skeleton are all dependent on the UI elements that are loading.
Grommet has added
skeleton property in order to make it easy to switch between a skeleton state and data-rich state for a variety of components.
The components that currently support skeleton are:
- Text, Paragraph, Heading
- Box, Card, Pageheader, Footer, Header
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.