DataState

Loading, empty, error or the thing itself, decided once from a Query status. A failure always outranks emptiness, so a list never claims to be empty when the request actually failed. Wraps children in an ErrorBoundary.

Playground

Move status through pending, error and success, and turn the result empty. Note that error wins over empty: a list that failed must not claim there is nothing in it.

<DataState
  status={"pending"}
  isEmpty={false}
  skeleton={<SkeletonText lines={3} />}
  empty={{ icon: UsersIcon, title: "No people yet" }}
  error={{ title: "Couldn't load your people", onRetry: refetch }}
>
  {people.map((p) => <PersonRow key={p.id} person={p} />)}
</DataState>