Loading patterns

Loading patterns help guide people and understand what to expect.

  • 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