Types & Usage Rules

• Skeleton Loaders: Reserved for initial full-page layout loading. Must not be used inside charts or tables. Always pairs with an overlay spinner due to low skeleton contrast.

• Spinners: Used to indicate section-level loading (e.g., widgets, tables) after an initial grace period.

• Dotted Loaders: A low-weight loader displaying three animated dots for cell-level or inline text loading when primary container data has loaded but secondary API calls remain pending.

Grouped Loading with Grace Period

Use grouped loading when multiple components load at the same time and should appear together for visual stability, while still preventing a slow component from blocking the rest.

Grace Period [0 to 1500ms]

• During this window, components don’t render individually.

• If all items finish within this window → render as a group.

• Use skeleton loading during this period

• Always show text

Partial Reveal / Hard Timeout [1500ms+]

• If at least one item is still loading after the grace window → render completed items immediately (don’t wait for the slow one).

• Use dotted loaders for pieces that haven’t loaded