Skeletons are used to improve the loading of certain pages that take some time to fully load. Their low-fidelity aspect gives the impression that the interface is pre-loading. By showing that the contents of the page have not yet completely loaded, the perception of the loading time is eased by providing visual feedback. The skeleton may also indicate the future presence of an element (for example, a chart that will appear when some information has been entered). A skeleton is typically used for complex elements or cards with content, which are most likely to need more time to load.
Best Practices
- A skeleton is a temporary state.
- Do not use a skeleton for basic elements (buttons, links, etc.) individually.
- When using it to pre-load, its appearance should not exceed three seconds.
- When a skeleton is used while waiting for an action to be completed, an explanatory message may be added.
- For a full page, always fade in and fade out all the loading skeletons at the same time, so as not to have the appearance of a domino effect.
- The page title must not be presented in a skeleton, but loaded directly to indicate that elements are loading.
- Do not use a skeleton for elements that are also used for loading (spinners, etc.)
- Do not use a skeleton for notification elements (banners, toasts, etc.)
Placement
Skeletons should be placed in the exact location of the element they are replacing.
Appearance
The skeleton is composed of gray blocks simulating the presence of an element in low fidelity.
Behavior
The skeleton may appear by itself, or accompanied by a notification field.