Loading States

Loading states help communicate that when the app is processing a request.

Usage

  • Execution depends on context:
  • Skeletons show when a page is initially loading
  • Spinners show when a request is being processed in result of a user action
  • Try to use SSR for initial page loading and data-fetching on the client for user actions.
  • Page content should not switch between Skeletons and Spinners.

Skeletons

Skeleton's are displayed when an application is taking longer than expected to load an initial page.

This is a description of something.

Trash content

Trash content is a place where you can find all the content that you have deleted. You can restore or permanently delete the content from here.

Skeleton

This typically doesn't happen when utilizing server-side rendering (SSR) for page loads.

Spinners

Spinners are used when a user triggers a request to the server by using an action.

This is some data about something

This is a detail about that text of something.
Spinner

The page content should remain static until the new data has arrived.