The Four States of a Request

Decide what you would build from the brief alone. Everything below it is available, but the exercise stops working if you open it first.

The brief you were given

A component fetches a list and renders it. Currently it renders an empty list while loading and an empty list on error. Give the request a complete UI.

The trap — the wrong fix that looks right

Adding loading and error booleans and rendering a spinner, an error message and the list. It handles every case that appears in testing and it can represent states that cannot exist — loading and error both true after a retry, error true with stale data still rendered, loading false before anything was ever requested so the empty state flashes before the first fetch. Those combinations are what produces the classic "error message on top of the results" screenshot. The states are mutually exclusive in reality and the model has to say so, or every future change adds another if to keep them consistent by hand.