Skeletons provide a low-fidelity representation of content before it appears, improving perceived load time. Use them for the dynamic parts of a page.
Figma
The Figma reference for Skeleton will appear here once the design link is added.
Storybook
Interactive examples for Skeleton will render here once the Storybook link is wired in.
Best practices
- Use skeletons when page content loads all at once, to preview the eventual layout.
- Match the number and shape of skeleton lines to the content being loaded so it’s an accurate preview.
- Use skeletons inside any content container, and when content loads after the main page.
Do’s and don’ts
Do
Use skeletons for dynamic content that changes on load.
Don’t
Use skeletons for static content, or show placeholder text that will change once loaded.