Skeleton
Overview#
Low fidelity visual depiction of the UI before content appears. Skeleton loading states are perceived by users as being shorter in duration when compared to blank screens and spinners.
Design Guidelines#
Use when#
- Providing a low-fidelity depiction of the entire or part of the UI before actual content appears.
- Loading for dynamic content; use actual content when content doesn’t change (static content).
Don't use when#
Never use skeletons to give feedback for in-context actions such as saving a form or fetching search results. Instead use the progress or spinner component.
Never use skeletons if the system is unable to determine with certainty what layout and components are used once the screen loads. Use the loading spinner component instead.
Visual style#
- Always match the size of the content that will load.
- Always give users an indication of the page or content layout once content loads. Do this by mimicking the layout that will load.
Behaviour#
Always allow content to load gradually. Real content should replace skeleton objects immediately when the data is available.
Editorial#
Always show static content that never changes on a page. Static content can include page titles, headings and body text.
Always use the skeleton component to load dynamic content on a page.
Never use placeholders for content that will change once the UI loads.
Design Guidelines#
Use when#
- Providing a low-fidelity depiction of the entire or part of the UI before actual content appears.
- Loading for dynamic content; use actual content when content doesn’t change (static content).
Don't use when#
- Never use skeletons to give feedback for in-context actions such as saving a form or fetching search results. Instead use the progress or spinner component.
Visual style#
- Always match the size of the content that will load.
- Always give users an indication of the page or content layout once content loads. Do this by mimicking the layout that will load.
Behaviour#
Always allow content to load gradually. Real content should replace skeleton objects immediately when the data is available.
Editorial#
Always show static content that never changes on a page. Static content can include page titles, headings and body text.
Always use the skeleton component to load dynamic content on a page.
Never use placeholders for content that will change once the UI loads.
Skeleton layout
Should be used when all content on a page loads at the same time. Use with other skeleton loading components such as skeleton paragraph body text and skeleton heading text.
Skeleton layout for static content
Use when loading pages where the page title and heading content are known and don't change. For example, display page titles for pages such as Manufacturers and Users.
Skeleton layout for dynamic content
Preview example in Storybook - two column
Preview example in Storybook - single column
Use when loading pages where the page title and heading content change. For example, use skeleton component for manufacturer detail and user detail pages.
Skeleton paragraph body text
Used when loading a block of text or loading a form.
Skeleton heading text
Use when loading heading and display text.
Skeleton thumbnail display Preview example in Storybook
Use when loading images.