Loading overview
v1.0.0
Our design framework for loading assures customers that their request is in progress and can create the illusion of shorter load times across the experience—improving satisfaction.
- Skin
- CoreUI
- React
Our design framework for loading assures customers that their request is in progress and can create the illusion of shorter load times across the experience—improving satisfaction.
Expanded component guidance coming soon.
This page will be updated soon with expanded guidance and clarity from Design, Platform, and Accessibility teams.
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.
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.
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.
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.
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.
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.
