Empty, Loading, Error, and Partial States

The default posture: a surface is not finished until loading, empty, error, and partial have each been specified — the happy path is one of five states, not the state with four edge cases. Most of what makes software feel unreliable happens here: the spinner that flashes for 200ms, the "No data" that never says why, the dashboard that blanks because one tile's request failed. This skill is the single owner of the loading threshold ladder; no other skill may restate those numbers. Three neighbours: notifications owns anything thrown at the user, while anything rendered in place of the data belongs here; ui-copy owns the words inside these states, this skill owns their container, timing, and anatomy; and onboarding owns the first-run sequence, while the spec of any individual empty state — the first-run one included — is here.

Render these states from the data layer the project already has. TanStack Query and SWR expose isPending, isFetching, isError, and isPlaceholderData; RSC exposes Suspense boundaries and error.tsx; a Redux or Zustand store already carries status fields. Read those flags and branch on them. A parallel const [loading, setLoading] = useState(false) beside a query hook guarantees the two disagree on a refetch, and the symptom — a spinner that outlives the data — is always blamed on the network.

Quick Reference

The loading ladder — house rule, one owner