Performance, States & Patterns

Every interface exists somewhere on a spectrum of states. The difference between an application that feels polished and one that feels fragile lies almost entirely in how it handles the moments between the ideal. Loading, emptiness, failure, first contact, disconnection — these transitional states collectively occupy more of a user's lived experience than the "happy path" designers typically obsess over. This skill addresses that full spectrum with rigor, providing concrete patterns, code, and architectural guidance for every in-between moment.

The State Spectrum Philosophy

An interface element moves through a predictable lifecycle of states. Designing for all of them is not optional — it is the baseline for professional-grade UX.

EMPTY -> LOADING -> SKELETON -> PARTIAL -> COMPLETE -> ERROR -> OFFLINE
  |         |          |           |          |          |         |
  v         v          v           v          v          v         v
First-use  Spinner   Shimmer    Streaming   Ideal     Recovery  Cached
guidance   or bar    placeholders  data      render    + retry   fallback

Empty is the starting point: the user has arrived but there is no content yet. This could be a brand-new account, a search with no results, or a list that has been cleared. Empty states are opportunities to guide, teach, and motivate.

Loading is the state of uncertainty. The system is working, but the user cannot yet see results. The perceived duration of this state is more important than its actual duration — perceived performance is a design problem, not just an engineering one.