Loading States

Loading states inform the user that a process is happening in the background. Good loading states reduce perceived wait times and improve the user experience.

Types of Indicators

We use different indicators depending on the context and duration of the action.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Spinners

• Global Spinners: For full-page initial loads.
• Inline Spinners: Used inside buttons or small components to indicate an action in progress.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Skeletons

Skeleton screens show a placeholder layout while the actual content loads. They create a smoother transition and help users anticipate the structure.

• Use cases: Dashboard widgets, lists, profiles.
• Animation: Keep the shimmer subtle and continuous to signal activity.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.