---
title: "Give every data view all its states · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/data-views/every-data-state
updated: 2026-10-20
licence: "All rights reserved"
---

# Give every data view all its states

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Data views](https://agentwranglers.se/playbook/app-ui/data-views)
- Rule: Give every view that loads data a distinct state for loading, empty, error and success. Add partial when it combines sources. Render a designed screen for each.
- How: Model the states as one type with a `status` field, as [states as types](https://agentwranglers.se/playbook/architecture/data-shapes/states-as-types) shows, so the code can't forget one. Write the empty and error screens before the success screen. In server-rendered apps, return a separate partial template for each state.
- Check: The [component tests](https://agentwranglers.se/playbook/app-ui/tests-and-budgets/component-state-tests) render every data view in each state. A script lists every data view whose tests lack one of its state names. The list is empty.

Example:

```tsx
type OrdersState =
  | { status: 'loading' }
  | { status: 'error'; reference: string }
  | { status: 'success'; orders: Order[] };

export function OrdersPanel({ state, onRetry }: { state: OrdersState; onRetry: () => void }) {
  switch (state.status) {
    case 'loading': return <OrdersSkeleton />;
    case 'error': return <LoadError reference={state.reference} onRetry={onRetry} />;
    case 'success': return state.orders.length ? <OrderTable orders={state.orders} /> : <NoOrdersYet />;
  }
}
```

```python
@app.get("/panels/orders")
def orders_panel():
    try:
        orders = order_service.recent(current_user().account_id)
    except ServiceUnavailable as error:
        return render_template("panels/orders_error.html", reference=error.reference), 503
    if not orders:
        return render_template("panels/orders_empty.html")
    return render_template("panels/orders.html", orders=orders)
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/data-views/every-data-state`.

- Next: [Show loading without flicker](https://agentwranglers.se/playbook/app-ui/data-views/loading-without-flicker)
- [Data views](https://agentwranglers.se/playbook/app-ui/data-views)