Loading

Design the loading state for a real product screen, not a generic spinner. Pick one context: a dashboard panel, search results page, detail view, or form submission result. Show what the user sees while content is still coming in and what remains visible from the previous state, if anything.

Use a placeholder structure that matches the final layout. If the screen has cards, tables, charts, or text blocks, mirror those shapes so the page feels stable while data resolves. If progress is measurable, show it. If it is not, use a calm indeterminate state with a clear label like “Loading report…” or “Fetching results…”.

Include the awkward cases: slow load, partial load, and timeout. When loading takes too long, add a next step such as retry, cancel, or continue waiting. Keep the language plain and specific so the user knows whether the system is working, waiting, or stuck.

Creativity is key for loading patterns—consider how branded elements or delightful micro-animations can transform the waiting experience from a mundane pause to an engaging moment in your design.