Usage
A skeleton is a type of loading state that allows you to expose content incrementally, once the structure of the page has been loaded in. A skeleton should match the exact structure of the element you’re loading in and can be used in components on top of the page, such as in a drop down menu, or a card. Skeleton loading should be progressive –– it should load static text first, followed by variable elements of the UI.
When to use a skeleton vs. a loading spinner
Use a skeleton when:
- The structure of a page has loaded in but the content has not.
- Some content of a page has loaded, but not all. For example, in a dashboard, you may have some loaded cards, while others are still loading.
- You want to show loading content inside of a card, table, data list or more.
Show a skeleton when:
- You know what the populated data is going to look like (even if it results in an empty state).
Do not show a skeleton when:
- You don’t know what the structure of the component is going to look like.
Show a spinner when:
- You have multiple elements on the page that are loading at different speeds, use a spinner once the structure of at least one element is loaded on the page.
- You are attempting to load in a component that sits on top of a page with an expected structure.
- It is likely it will fail or show an empty state while waiting for actions to complete.
Accessibility
For information regarding accessibility, visit the skeleton accessibility tab.
