Overview
Loading states are the most misunderstood UI pattern. Most products show a spinner whenever anything is loading — which trains users to associate the product with waiting. A loading state is not a neutral signal. It is a communication: "the system is working, here is what to expect." The design of that communication determines whether users feel in control or uncertain.
The Loading State Design System Prompt builds a loading state system calibrated to the actual wait time and the user's context — so short waits are invisible, medium waits feel shorter than they are, and long waits give users enough information to decide whether to wait or come back.
What you get: - Loading state taxonomy: the five loading scenarios and the pattern each requires - Delay threshold model: the timing rules that determine when to show nothing, a skeleton, or a spinner - Skeleton screen architecture: the layout rules that make skeletons accurate predictors of content - Progressive loading pattern: how to show content as it arrives rather than waiting for everything - Optimistic UI model: how to update the UI before the server confirms the action - Error recovery from loading: how to transition from a loading state to an error state without confusion
Built for: product designers and design engineers designing loading states for web and mobile applications.