Placeholder
Loaded State
Lazy loading is a design pattern that should be used when loading pages which contain a lot of data. To improve performance, the page content is initially replaced by a low-fidelity skeleton of the page’s layout, which is then gradually replaced by content as it loads.
Lazy loading patterns should behave as follows:
After 1 second, show the lazy loading screen.
A shimmer animation indicates progress.
Content is progressively populated, enabling the user to start interacting with the page.
After 4 seconds, for any areas which have not yet loaded, the lazy loading pattern is replaced with progress bars to indicate expected wait times.
Lazy loading should be used when the number of assets on a page have a significant detrimental effect on the load time, making it longer than 1 second. Lazy loading indicates to the user that the system is working on the problem, and reassures them that no error has occurred.
Lazy loading consists of:
A blank page skeleton.
Skeleton cells: grey or neutral-toned shapes which represent the typical layout of the content that will populate the page once loaded. (See below).
Each asset should always use the same skeleton cell layout, rather than trying to match the exact content which will subsequently be loaded.
Placeholder | Loaded State |
|---|---|
| |
Skeleton cells are non-interactive.
The user can interact with loaded content, providing it’s not dependent on other elements on the page which have not yet loaded.
A shimmer animation should be used within each skeleton cell, to show that content is loading and decrease the perceived wait time. The shimmer animation has the following properties:
Base color: the color of the skeleton cell.
Shimmer color: the color that waves through the cell. Darker than the base color.
Direction: the animation should move from left to right within each skeleton cell.
Duration: the shimmer effect should last for 4 seconds.
Do:
Use for infinite scroll, when users need to dynamically load new content on scroll, such as for casual browsing and research.
Use skeleton cells which are in the same positions and a similar shape to the content that will replace them.
Show loaded data as soon as possible, replacing the skeleton cells.
Use a shimmer animation to show that content is being loaded.
Display a corresponding System Error if lazy loading fails.
Don't:
Use Continuous Action Toasts for page-level lazy loading.
As outlined in the Digital A11y Accessibility Guidelines, the 'aria-busy' state indicates an element is being modified. Assistive technologies use this state to determine whether to delay interaction until the content is ready.
Users should not be able to interact with content which is dependent on other elements in the interface which have not yet loaded.
Zeplin link | Screen thumbnail |
|---|---|
 |