...
After 1 second, show the lazy loading screen.
A shimmer animation indicates progress.
Content is progressively populates the pagepopulated, enabling the user to start interacting with the contentpage.
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 amount number 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.
...
A blank page skeleton.
Skeleton cells: grey or neutral-toned shapes, which represents shapes which represent the typical layout of the content that will populate the page once loaded. (see format See below).
Each asset should always use the same skeleton cell layout, regardless of rather than trying to match the exact content which will subsequently be loaded.
...
For example, the number of skeleton items shown in a list should be consistent, regardless of the number of items which will subsequently load.
Placeholder | Loaded State |
|---|---|
 |  |
Interaction
The skeleton Skeleton cells are non-interactive.
The user can interact with loaded elementscontent, providing they are it’s not dependent on other elements on the page which have not yet loaded.
...
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 System Error if lazy loading fails.
Don't:
Use continuous action toasts Continuous Action Toasts for page-level lazy loading.
Accessibility Compliance
...