Loading
Loading states tell the user that data is being loaded or that an operation is taking place
Overview
Loading states are visual indicators used to communicate to the user that data is being loaded or an operation is taking place and the UI is not frozen. It is important to use loading states to keep the user’s attention on the page and make the waiting experience more bearable.
Localized Loading
As a best practice, data should be loaded at the deepest or lowest possible level of a UI in order to show the user as much of a page as possible as soon as possible. For example, bring loading states down to the level of an atom, component, or module, and load a page’s structure to give the user an understanding of what the page will look like after data is loaded.
This has a few benefits:
- Increases perceived loading speed
- Reduces cognitive load
- Loading errors are not guaranteed roadblocks
Types of loading states
Loading Button
Use when a Button is pressed to indicate an action is processing.
Spinner
Use a Spinner when the structure of the loaded content is unknown.
Skeleton
Use Skeletons when the structure of the loaded content is known. Always default to using Skeletons over Spinners.
Progress Bar
Use a ProgressBar for excessively long processes (over 10 seconds) where progress of the operation can be displayed.
