Empty & Loading States

Overview

The difference between a prototype and a product is the non-happy states. Every data view has at least four: loading, empty, error, and success. Agents ship the success state and leave the rest blank — which reads as broken. Design all four, every time.

When to use

• Any component that fetches data.
• A list/table/dashboard that can be empty.
• Mutations that should feel instant (optimistic UI).

The four states