What to show users when there’s a delay.
Loading animations let the user know that content is on the way. Because we’re asking the user to wait, we want to be consistent, limit this delay and, where possible, preview the content that’s about to load.
There are three loading types recommended for use in Thumbtack products:
This is our standard loading animation. It should be used when if we need to keep the user on the page or when smaller pieces of an existing layout is being generated. Use the blue loading dots over white whenever possible.
Super Duper Photography
Danny’s Wedding Photos
Example 1. An action was triggered and we prevent further actions with a scrim. Use the light scrim token to create this UI.
Waiting to hear back.
Example 2. A smaller piece of content is being loaded on an existing page.
It’s better to have a few pros look into the job.
Example 3. A button was clicked and we we’re waiting for data.
When the layout of the content to be rendered is known in advance — for example, a list of avatars with names and descriptions — studies indicate that skeleton loaders can reduce the user’s perceived loading time.
In cases where content is loading from the device in Thumbtack’s native apps, for example, a “pull down to refresh” or retrieving location settings, we can rely on the native loading animation.