Loading patterns
Loading patterns help guide people and understand what to expect.
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 each component
- 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.
- 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.
External links
On this page