Give every data view all its states

How to do it

Model the states as one type with a status field, as 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.

Example

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 />;
  }
}

@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)

How to check

The component 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.