AsyncContent

Handles async data states (loading, error, empty, success).

Props

AsyncContentProps<T>

Prop	Type	Required	Description
isLoading	boolean	Yes	Whether data is loading
error	Error | null	No	Error object
data	T | null | undefined	No	Data to render
isEmpty	boolean	No	Override empty detection
children	ReactNode | (data: T) => ReactNode	Yes	Content or render function
loadingComponent	ReactNode	No	Custom loading UI
errorComponent	ReactNode | (error: Error) => ReactNode	No	Custom error UI
emptyComponent	ReactNode	No	Custom empty UI
onRetry	() => void	No	Retry callback for error state

Example

<AsyncContent
  isLoading={isLoading}
  error={error}
  data={users}
  onRetry={refetch}
>
  {(users) => (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  )}
</AsyncContent>

State Priority

1. Loading → shows loading component
2. Error → shows error component
3. Empty → shows empty component
4. Success → renders children

See also

• AsyncContent (Conceptual)
• PageLayout