Loading patterns

Comparing components

Guidelines

Loading skeleton: A collection of loading placeholders that display a non-interactive preview of the app’s actual UI to visually communicate that content is in the process of loading.
- Loading skeleton: A single loading placeholder element used in a loading skeleton to visually communicate that piece of content.
Loading spinner: An animated element that indicates loading is in process and where it will appear when loading data is slow.

When to use

For more than 1 element loading at the same time that requires an indicator, use a loading skeleton.
For high-traffic pages like our account dashboard, use a loading skeleton.
When a loading spinner is not prominent enough, use a loading skeleton.
When data takes more than 300ms to load on an average connection for our user base, use a loading skeleton.
For a long-running process or background process, e.g. importing data or exporting reports, use a progress bar (link to come).
For fast processes that take less than 300ms, consider a loading spinner or no loading state at all.
For a tiny, inline action or feedback, e.g. clicked a button and the action will take time, use a loading spinner.
For low-traffic pages such as super-user only admin pages, use a loading spinner.
If a page refresh is required, use an empty state with a Call To Action to refresh.
For introducing content with flair, use a choreographed or stylized entrance. In contrast to a loading skeleton, choreographed or stylized entrances don’t care how long content takes to load. For example, the whole page might be loaded already, but we only reveal each section with a fade as the person scrolls down the page. A single stylized entrance may mask and replace a loading spinner.