Skeleton Guidelines

Skeleton loading is a type of busy indicator that provides users with a skeleton page as a placeholder while there's no layout or content to show. Visually, skeleton pages are grey boxes with animations to indicate loading activity.

When to Use

Progressive loading: Skeleton pages create an impression of speed and reliability when an app encounters performance barriers. They provide a generic preview of the layout, which makes the app seem to load faster. Show the Skeleton instead of a blank page.

Full pages vs. areas: Skeletons are typically used for entire pages, but can also be shown for large areas being loaded, e.g. the contents of a freshly opened Dialog.

Partially loaded content: When the layout and some parts of the content can be shown, display the rest of the page being loaded with Busy Indicators (e.g. widgets on a dashboard, rows in a list).