Skeleton

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.