Design the wait.

Loading is not an edge case. It is the interface acknowledging a request, setting an expectation, and protecting the user’s sense of progress.

Principles

Say what is happening

Use a generic spinner for brief, indeterminate work. When a task lasts longer or has meaningful stages, show the state: searching, reading, uploading, or finishing.

Preserve the shape of the result

Skeletons work when they describe the content that will replace them. Match the eventual spacing and hierarchy instead of filling every empty region with gray rectangles.

Move with restraint

Loading motion should be legible in peripheral vision without asking for attention. Prefer transforms and opacity, maintain a clean loop, and always provide a reduced-motion state.

Choosing a pattern

Inline actions usually need a compact indicator that preserves the control’s width. Page-level data works well with structural skeletons. Agent work benefits from specific status language and a quiet sign of continued activity.

Accessibility

Mark a changing region with aria-busy="true". Give meaningful loaders role="status" and concise text. Hide purely decorative motion from assistive technology, and do not use animation as the only indication of state.