Loading
This pattern should be used whenever information or system actions have an indeterminate loading or execution time. This makes it easier for the user to understand what is happening and prevents them from giving up before completing the action. Loading examples:
Spinner
It does not report progress in the process or loading time, so it should be used when loading time is indeterminate.
For more details see the Spinner documentation.
It can be used within smaller components or structures, such as inputs, search fields, within lists and tables, and even with other components, such as the button, for example.
Skeleton
Skeletons are simplified versions of a page's components and structures, which appear before information is loaded. Replaces empty pages and improves perception of time during loading.
It's not necessary to get caught up in every detail, as the Skeleton has movement.
It should form something close to the final structure, using few elements to make the page clean and pleasant. Use when multiple elements need to be loaded simultaneously.
For more details see the Skeleton documentation.
Infinite loading
Can be used to replace pagination and allow exploratory navigation.
This type of navigation is not recommended for cases where the user needs to find specific information. In these cases, use pagination.
With each click, the number of results displayed in the listing increases. For example, if 20 results were displayed, the "Load More" button will display 20 more results.
Button loading
Buttons can also have a specific loading state for actions that take some time to process.