Loading and saving

Communicating a system's status, like loading and saving, is essential to establishing a good user experience. It reassures users that the system is actively retrieving or saving data and reduces the users’ perceived waiting time.

Skeleton

You can use skeletons to build a simplified version of your user interface while the content is still loading.

There are two types of skeletons:

• The default skeleton component represents the loading state of any of our user interface components.
• The skeleton text component represents the loading state of any textual content.

You should only use skeletons when your app is loading for the first time or if most of it is in a loading state, where multiple progress indicators would distract users.

Progress indicators

Progress indicators inform users about the state of an ongoing loading or saving process.

There are two types of progress indicators:

• The progress circle component informs users about the state of an ongoing loading process.
• The progress bar component informs users about the state of an ongoing saving or uploading process.

Progress indicators can purposely steer the user's attention toward a specific part of your app. However, be aware that progress indicators draw a lot of attention and can be distracting if shown more than once on a page.

Behavior

Wait to show progress indicators. Always use a delay (~500 ms - 1 s) unless you know loading will take a while. Once you show a progress indicator, don't clear it immediately but display it for at least some time to avoid flickering (a minimum of ~200 ms).

Progressive loading

Use progressive loading to load data in batches. Start with the basic structure, then progressively provide more details. Doing this unblocks users and reduces the perceived waiting time.