#Overview

Loaders inform users that content is being loaded. They are used when certain elements or parts of the page may take longer to process and display. This provides reassurance that the system is working.

#Types of loaders

#Skeleton

Use a Skeleton for loading a full page or parts of a page with a predictable layout.

#Spinner

Use a Spinner for processing or loading content that is unpredictable. 

#Best practices

#Stay consistent

Do

Use one type of loading state for the same type of content.

Don't

Use a combination of a spinner and skeleton screen.

#Be predictable

Ideally, you should place content immediately. Otherwise, prioritize making content predictable and use a skeleton for loading the content.

#Give feedback

Show feedback once the progress is complete, such as new content or a success or error message.

An error message is not required if the content that failed to load is not relevant to the core user journey (for example, the testimonials section “Customer Feedback”).

#Good to know

#Website Response Times

Website response times help frame our approach to when we use specific types of loaders. Learn about the importance of response-time limits in the article Website Response Times by Jakob Nielsen from NNgroup.

#Core Web Vitals

Loaders play a part in optimising for the 3 metrics in Web Performance & Web Vitals. For example, a skeleton screen helps to create a good user experience by reducing unexpected layout shifts (Cumulative Layout Shift).

Web Performance & Web Vitals define acceptable performance thresholds and affect our SEO ranking. They include the following 3 metrics:

• Largest Contentful Paint (LCP) – measures loading performance
• Interaction to Next Paint (INP) – measures interactivity
• Cumulative Layout Shift (CLS) – measures visual stability