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.