Description
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.
Basic Flow
Lazy loading patterns should behave as follows:
After 1 second, show the lazy loading screen.
A shimmer animation indicates progress.
Content progressively populates the page, enabling the user to start interacting with the content.
After 4 seconds, for areas which have not yet loaded, the lazy loading pattern is replaced with progress bars, to indicate expected wait times.
Usage and Behavior
Lazy loading should be used when the amount of assets displayed 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.
General guidelines
Structure
Lazy loading consists of:
A blank page skeleton.
Skeleton cells: grey or neutral-toned shapes, which represents the typical layout of the content that will populate the page once loaded (see format below).
Each asset should always use the same skeleton cell layout, regardless of the exact content which will subsequently be loaded.
Format
Placeholder | Loaded State |
|---|---|
 |  |
Interaction
The skeleton cells are non-interactive.
The user can interact with loaded elements, providing they are not dependent on other elements on the page which have not yet loaded.
Animation
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 1.5 seconds.
Best practices
Do:
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 error message if lazy loading fails.
Don't:
Use continuous action toasts for page level lazy loading.
Accessibility Compliance
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.