Skeleton loader
A skeleton is a graphical placeholder, reserving physical space in the page for content in cases where a service or action may be slow to resolve. A skeleton can be considered as an alternative to the progress spinner in many situations.
We use motion with skeleton loaders to convey that a page is not stalled and that data is still being retrieved. This movement can help reduce user uncertainty. We refer to the motion aspect of the skeleton as the “shimmer”. Please note the shimmer is primarily used on native mobile screens. This is because large, animated shapes on web pages can be visually jarring—undermining the notion of perceived speed. Skeletons should only be used for loads that take 500ms or longer.
Specs
- Animate per individual skeleton box (screen width)
- Animate Left to Right in 833ms
- Wait 667ms after animation before looping
While it is desirable for skeletons to naturally be replaced with content from left to right and top to bottom, that is not always the case for in-order streaming. Content fades in from 0-100% opacity with a ~17ms gap between assets to create a pleasant, fluid motion. In-order streaming should be used and may vary slightly between pages, but the end result should always feel natural and polished.
Across native, pages may require additional requests that extend the duration of the page load. The skeleton with the shimmer effect is used across the native experience to mask load times and reduce visual latency. Please note, the following examples are for visual reference and may not actually require skeleton loaders in product.
SRP
On the SRP page, skeleton loading is used to load a grid of item tiles. This is beneficial because the layout of the grid is already known ahead of time. This example loads at around 783ms.
View Item
When navigating from the SRP to View Item page, there is content that is able to be preloaded such as the image and title. Instead of forcing skeletons across the entire page, they are only used for elements that are not yet ready. This example loads at around 950ms.
Listing Details
On this Listing Details page, there is a custom skeleton that matches the design. This is possible when the next page of the experience is known ahead of time.
SRP
Though skeletons are rare on SRP because the page tends to load rather quickly, they can still be leveraged when needed.
View Item
Here skeletons are loaded using in-order streaming. Notice how the right column loads in a staggered motion because the bottom right content needs additional time.
View Item
In rare instances, a page using a skeleton loader may need an extended amount of time to load. While we don’t recommend using skeletons for longer loads, it may be inevitable due to connectivity issues. If this occurs, the shimmer may animate after 2.5 seconds of elapsed time. The shimmer should make a single pass followed by additional 2.5 second pauses between animations until the page is ready. This is the only exception that allows the shimmer to be used on desktop.
Tables
For tables, the header and checkboxes remain present. The rows of content are represented with simplified skeletons. Please note, tables can have a variety of loading indicators.