Do
Load content progressively rather than waiting for everything to be ready.
Don't
Don't block the whole page until all data loads.
Loading
Loading states give users feedback when content or processes aren't immediately available. Effective use of loading states reduces perceived wait times, and improves UX and retention by communicating the system is actively working on the request.
Key principles
- Keep the page interactive while loading, only blocking when absolutely necessary.
- Load and display content progressively rather than waiting for everything to be ready. Elements that do not rely on external data should not have a loading state.
- Use consistent loading patterns across similar actions in the application.
Understanding Loading States
Determinate Loading
Shows the specific progress of a task, typically represented by a progress bar. Use it for longer processes where the duration time can be estimated.
Indeterminate Loading
Use this to show an ongoing process without specifying progress. It's useful when you can't predict the task's duration. Ideal for shorter processes, it often uses Spinner or Skeleton components.
When and How to Use Loading States
Expected wait time
Wait times affect which option to choose when providing a loading state. It is hard to estimate how long the process will take, but you can use them as general guidance.
| Loading time | Usage |
|---|---|
| Less than 1 second | Don't display a loading state. Showing a loading indicator for a brief duration can be jarring for the user due to the flickering of the content. |
| 1 - 10 seconds | Use indeterminate loading indicator such as Spinner or Skeleton. |
| More than 10 seconds | Use a progress bar as the loading indicator and provide an estimate of the duration if possible. |
Progressive loading
Avoid blocking the whole page until all data loads. Load the page incrementally based on the importance of the content.
Grouping content
Loading content independently can improve perceived performance. However, too much independent loading might cause a visual overload.
Group elements that form logical units, serve related purposes, or are close to each other. For example, you might group all elements of a user profile card to load together, rather than loading the avatar, name, and details separately.
Do
Group related elements together into logical groups and load them independently.
Don't
Don’t load every element independently. It creates chaotic environment.