Loading overview
Our loading framework assures customers that their request is in progress and can create the illusion of shorter load times across the experience—improving satisfaction.
Invisible
Low to no visible latency through use of transitions to mask load times. The most effective loading state is one that appears invisible to the user by displaying relevant information quickly and avoiding transitions for content that is available.
Lightweight
Implied speed and performance through lightweight skeleton loading and OS-specific loading indicators. Loading should feel refined and serve as a means to enhance the user's experience and communicate with them effectively.
Choreographed
Masked loading times through choreographed motion sequences. Choreography refers to timed elements consisting of type, shape, opacity, and translation working together to deliver a reassuring experience.
Selling
Whenever possible, use page caching and other development tools to load content as quickly as possible. Here the page is already preloaded and readily available—reducing the need for loading.
While we aim for the fastest experience, some latency is inevitable during server requests. In these cases, we focus on Skeleton loaders and OS-specific indicators.
Search Results Page
Skeleton loaders are used to load content for pages where the overall layout is mostly known ahead of time. Skeletons provide the best experience when they mimic the final content as closely as possible. Piecemeal and/or generic skeletons should be used sparingly. Skeletons are commonly used on pages with consistent grids and components like Search, Home, and View Item.
Checkout
Loading can take longer during final purchase as the system wraps up before confirmation. The expressive loader has an option to offer states of disclosure through messaging to communicate progress to the user.