Loading states tell the user that data is being loaded or that an operation is taking place
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.
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:
Use when a Button is pressed to indicate an action is processing.
Use a Spinner when the structure of the loaded content is unknown.
Use Skeletons when the structure of the loaded content is known. Always default to using Skeletons over Spinners.
Use a ProgressBar for excessively long processes (over 10 seconds) where progress of the operation can be displayed.