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.
Video description: A lightmode card swipes right to reveal a darkmode card, which then swipes right to reveal a lightmode card, repeating the animation.
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.
Video description: A skeleton loader animation is shown with a shimmer flowing through the skeleton.
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.
Video description: eBay’s four core colors animate through a loading bar, with support text cycling through above.
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.
Video description: The homepage on the eBay mobile app is instantly switched to the selling tab on the eBay mobile app.
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.
Video description: A search for ‘Mid century couch’ on the eBay app displays a skeleton loader before displaying results.
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.
Video description: An order is confirmed on the eBay app, displaying the expressive loader communicating progress. An order summary screen is shown once the animation is complete.