domains / families / design / loading-states

loading-states

separate

Design waiting experiences — spinners, skeletons, optimistic updates, and progressive reveal. Use when content takes time to arrive. For the latency budget itself use `doherty-threshold`; for success confirmation use `feedback-patterns`.

When to use

• Designing skeleton screens
• Creating spinner and progress indicators
• Implementing progressive loading
• Designing optimistic UI updates
• Creating placeholder content
• Defining loading duration guidelines
• Designing content transition behavior

When not to use

• Defining the latency budget
• Designing success confirmation

Skill page

Source