Async

Storybook

Go to Story

AsyncProps

Defined in: src/components/Async/Async.tsx:46

Extends

• Pick<StateContainerProps, "grow" | "padding">

Properties

Property	Type	Description	Inherited from	Defined in
children	ReactNode	This is the main content that will be shown when there is no error, loading, or empty state.	-	src/components/Async/Async.tsx:52
entityName?	string	Pluralized name of the represented entity. Used in error and empty state messages. Example "users"	-	src/components/Async/Async.tsx:58
error?	boolean | FullErrorProps	Controls the display of the error state. Can be a boolean to simply show/hide the error state or an object with additional error state configuration. When true or an object with show: true, the error state will be displayed. Examples // Simple boolean usage <Async error={true} > // Object with additional configuration <Async error={{ show: true, children: "Custom error message ", }} /> />	-	src/components/Async/Async.tsx:83
empty?	boolean | FullEmptyProps	Controls the display of the empty state. Can be a boolean to simply show/hide the empty state or an object with additional empty state configuration. When true or an object with show: true, the empty state will be displayed. Examples // Simple boolean usage <Async empty={true} /> // Object with additional configuration <Async empty={{ show: true, children: "No Items Found", }} />	-	src/components/Async/Async.tsx:107
loading?	boolean	Controls the display of the loading state. When true, a loading spinner will be displayed. Useful for indicating data fetching or processing states.	-	src/components/Async/Async.tsx:113
renderState?	(specialState) => ReactNode	Can be used to wrap state with a custom container. Useful for customizing the layout or styling of error, loading, or empty states. Uses a render prop pattern to conditionally wrap state components only when they are present.	-	src/components/Async/Async.tsx:123
className?	string	-	-	src/components/Async/Async.tsx:124
grow?	boolean	Provide true to expand StateContainer across available space. Useful for full-screen states.	StateContainerProps.grow	src/components/StateContainer/StateContainer.tsx:17
padding?	boolean	Guarantees standard padding for state, improving visual consistency. Default true	StateContainerProps.padding	src/components/StateContainer/StateContainer.tsx:22

---

FullEmptyProps

type FullEmptyProps = object & EmptyStateProps;

Defined in: src/components/Async/Async.tsx:40

Type Declaration

Name	Type	Defined in
show	boolean	src/components/Async/Async.tsx:40

---

FullErrorProps

type FullErrorProps = object & ErrorStateProps;

Defined in: src/components/Async/Async.tsx:42

Type Declaration

Name	Type	Defined in
show	boolean	src/components/Async/Async.tsx:43

---

Async()

function Async(__namedParameters): 
  | string
  | number
  | bigint
  | boolean
  | Iterable<ReactNode, any, any>
  | Promise<AwaitedReactNode>
  | Element
  | null
  | undefined;

Defined in: src/components/Async/Async.tsx:172

Generic container for representing async states. Handles common data states: empty, error and loading. Provides a consistent way to handle loading, error, and empty states across the application.

Parameters

Parameter	Type
__namedParameters	AsyncProps

Returns

| string | number | bigint | boolean | Iterable<ReactNode, any, any> | Promise<AwaitedReactNode> | Element | null | undefined

Examples

// Basic usage with loading state
<Async loading={isLoading}>
  <div>Content</div>
</Async>

// Usage with queriesToAsyncProps utility that parses query results
<Async
  {...queriesToAsyncProps([notificationQuery])}
  empty={notifications.length === 0}
  entityName="unread notifications"
>
  <div>
    {notifications.map((notification) => (
      <Notification key={notification.id} notification={notification} />
    ))}
  </div>
</Async>

// Custom state rendering
<Async
  loading={isLoading}
  renderState={(state) => (
    <div className="custom-container">
      {state}
    </div>
  )}
>
  <div>Content</div>
</Async>

---

queriesToAsyncProps()

function queriesToAsyncProps(queries, props?): object;

Defined in: src/components/Async/Async.utils.ts:36

Parses an array of queries into Async component props. Combines multiple query states into a single loading and error state.

Parameters

Parameter	Type	Description
queries	Query[]	Array of Query object results to parse
props?	{ loading?: boolean; error?: boolean | Partial<FullErrorProps>; }	Optional additional props to override the parsed states
props.loading?	boolean	-
props.error?	boolean | Partial<FullErrorProps>	-

Returns

object

Object containing loading and error states for the Async component

Name	Type	Defined in
loading	boolean	src/components/Async/Async.utils.ts:46
error	| boolean | { show: boolean; variant?: | "default" | "secondary" | "success" | "successLight" | "warning" | "warningLight" | "destructive" | "destructiveLight" | "outline" | null; size?: "sm" | "lg" | null; asChild?: boolean; entityName?: ReactNode; key?: Key | null; ref?: Ref<HTMLDivElement>; children?: ReactNode; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; onCopy?: ClipboardEventHandler<HTMLDivElement>; onCopyCapture?: ClipboardEventHandler<HTMLDivElement>; onCut?: ClipboardEventHandler<HTMLDivElement>; onCutCapture?: ClipboardEventHandler<HTMLDivElement>; onPaste?: ClipboardEventHandler<HTMLDivElement>; onPasteCapture?: ClipboardEventHandler<HTMLDivElement>; onCompositionEnd?: CompositionEventHandler<HTMLDivElement>; onCompositionEndCapture?: CompositionEventHandler<HTMLDivElement>; onCompositionStart?: CompositionEventHandler<HTMLDivElement>; onCompositionStartCapture?: CompositionEventHandler<HTMLDivElement>; onCompositionUpdate?: CompositionEventHandler<HTMLDivElement>; onCompositionUpdateCapture?: CompositionEventHandler<HTMLDivElement>; onFocus?: FocusEventHandler<HTMLDivElement>; onFocusCapture?: FocusEventHandler<HTMLDivElement>; onBlur?: FocusEventHandler<HTMLDivElement>; onBlurCapture?: FocusEventHandler<HTMLDivElement>; onChange?: FormEventHandler<HTMLDivElement>; onChangeCapture?: FormEventHandler<HTMLDivElement>; onBeforeInput?: InputEventHandler<HTMLDivElement>; onBeforeInputCapture?: FormEventHandler<HTMLDivElement>; onInput?: FormEventHandler<HTMLDivElement>; onInputCapture?: FormEventHandler<HTMLDivElement>; onReset?: FormEventHandler<HTMLDivElement>; onResetCapture?: FormEventHandler<HTMLDivElement>; onSubmit?: FormEventHandler<HTMLDivElement>; onSubmitCapture?: FormEventHandler<HTMLDivElement>; onInvalid?: FormEventHandler<HTMLDivElement>; onInvalidCapture?: FormEventHandler<HTMLDivElement>; onLoad?: ReactEventHandler<HTMLDivElement>; onLoadCapture?: ReactEventHandler<HTMLDivElement>; onError?: ReactEventHandler<HTMLDivElement>; onErrorCapture?: ReactEventHandler<HTMLDivElement>; onKeyDown?: KeyboardEventHandler<HTMLDivElement>; onKeyDownCapture?: KeyboardEventHandler<HTMLDivElement>; onKeyPress?: KeyboardEventHandler<HTMLDivElement>; onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>; onKeyUp?: KeyboardEventHandler<HTMLDivElement>; onKeyUpCapture?: KeyboardEventHandler<HTMLDivElement>; onAbort?: ReactEventHandler<HTMLDivElement>; onAbortCapture?: ReactEventHandler<HTMLDivElement>; onCanPlay?: ReactEventHandler<HTMLDivElement>; onCanPlayCapture?: ReactEventHandler<HTMLDivElement>; onCanPlayThrough?: ReactEventHandler<HTMLDivElement>; onCanPlayThroughCapture?: ReactEventHandler<HTMLDivElement>; onDurationChange?: ReactEventHandler<HTMLDivElement>; onDurationChangeCapture?: ReactEventHandler<HTMLDivElement>; onEmptied?: ReactEventHandler<HTMLDivElement>; onEmptiedCapture?: ReactEventHandler<HTMLDivElement>; onEncrypted?: ReactEventHandler<HTMLDivElement>; onEncryptedCapture?: ReactEventHandler<HTMLDivElement>; onEnded?: ReactEventHandler<HTMLDivElement>; onEndedCapture?: ReactEventHandler<HTMLDivElement>; onLoadedData?: ReactEventHandler<HTMLDivElement>; onLoadedDataCapture?: ReactEventHandler<HTMLDivElement>; onLoadedMetadata?: ReactEventHandler<HTMLDivElement>; onLoadedMetadataCapture?: ReactEventHandler<HTMLDivElement>; onLoadStart?: ReactEventHandler<HTMLDivElement>; onLoadStartCapture?: ReactEventHandler<HTMLDivElement>; onPause?: ReactEventHandler<HTMLDivElement>; onPauseCapture?: ReactEventHandler<HTMLDivElement>; onPlay?: ReactEventHandler<HTMLDivElement>; onPlayCapture?: ReactEventHandler<HTMLDivElement>; onPlaying?: ReactEventHandler<HTMLDivElement>; onPlayingCapture?: ReactEventHandler<HTMLDivElement>; onProgress?: ReactEventHandler<HTMLDivElement>; onProgressCapture?: ReactEventHandler<HTMLDivElement>; onRateChange?: ReactEventHandler<HTMLDivElement>; onRateChangeCapture?: ReactEventHandler<HTMLDivElement>; onSeeked?: ReactEventHandler<HTMLDivElement>; onSeekedCapture?: ReactEventHandler<HTMLDivElement>; onSeeking?: ReactEventHandler<HTMLDivElement>; onSeekingCapture?: ReactEventHandler<HTMLDivElement>; onStalled?: ReactEventHandler<HTMLDivElement>; onStalledCapture?: ReactEventHandler<HTMLDivElement>; onSuspend?: ReactEventHandler<HTMLDivElement>; onSuspendCapture?: ReactEventHandler<HTMLDivElement>; onTimeUpdate?: ReactEventHandler<HTMLDivElement>; onTimeUpdateCapture?: ReactEventHandler<HTMLDivElement>; onVolumeChange?: ReactEventHandler<HTMLDivElement>; onVolumeChangeCapture?: ReactEventHandler<HTMLDivElement>; onWaiting?: ReactEventHandler<HTMLDivElement>; onWaitingCapture?: ReactEventHandler<HTMLDivElement>; onAuxClick?: MouseEventHandler<HTMLDivElement>; onAuxClickCapture?: MouseEventHandler<HTMLDivElement>; onClick?: MouseEventHandler<HTMLDivElement>; onClickCapture?: MouseEventHandler<HTMLDivElement>; onContextMenu?: MouseEventHandler<HTMLDivElement>; onContextMenuCapture?: MouseEventHandler<HTMLDivElement>; onDoubleClick?: MouseEventHandler<HTMLDivElement>; onDoubleClickCapture?: MouseEventHandler<HTMLDivElement>; onDrag?: DragEventHandler<HTMLDivElement>; onDragCapture?: DragEventHandler<HTMLDivElement>; onDragEnd?: DragEventHandler<HTMLDivElement>; onDragEndCapture?: DragEventHandler<HTMLDivElement>; onDragEnter?: DragEventHandler<HTMLDivElement>; onDragEnterCapture?: DragEventHandler<HTMLDivElement>; onDragExit?: DragEventHandler<HTMLDivElement>; onDragExitCapture?: DragEventHandler<HTMLDivElement>; onDragLeave?: DragEventHandler<HTMLDivElement>; onDragLeaveCapture?: DragEventHandler<HTMLDivElement>; onDragOver?: DragEventHandler<HTMLDivElement>; onDragOverCapture?: DragEventHandler<HTMLDivElement>; onDragStart?: DragEventHandler<HTMLDivElement>; onDragStartCapture?: DragEventHandler<HTMLDivElement>; onDrop?: DragEventHandler<HTMLDivElement>; onDropCapture?: DragEventHandler<HTMLDivElement>; onMouseDown?: MouseEventHandler<HTMLDivElement>; onMouseDownCapture?: MouseEventHandler<HTMLDivElement>; onMouseEnter?: MouseEventHandler<HTMLDivElement>; onMouseLeave?: MouseEventHandler<HTMLDivElement>; onMouseMove?: MouseEventHandler<HTMLDivElement>; onMouseMoveCapture?: MouseEventHandler<HTMLDivElement>; onMouseOut?: MouseEventHandler<HTMLDivElement>; onMouseOutCapture?: MouseEventHandler<HTMLDivElement>; onMouseOver?: MouseEventHandler<HTMLDivElement>; onMouseOverCapture?: MouseEventHandler<HTMLDivElement>; onMouseUp?: MouseEventHandler<HTMLDivElement>; onMouseUpCapture?: MouseEventHandler<HTMLDivElement>; onSelect?: ReactEventHandler<HTMLDivElement>; onSelectCapture?: ReactEventHandler<HTMLDivElement>; onTouchCancel?: TouchEventHandler<HTMLDivElement>; onTouchCancelCapture?: TouchEventHandler<HTMLDivElement>; onTouchEnd?: TouchEventHandler<HTMLDivElement>; onTouchEndCapture?: TouchEventHandler<HTMLDivElement>; onTouchMove?: TouchEventHandler<HTMLDivElement>; onTouchMoveCapture?: TouchEventHandler<HTMLDivElement>; onTouchStart?: TouchEventHandler<HTMLDivElement>; onTouchStartCapture?: TouchEventHandler<HTMLDivElement>; onPointerDown?: PointerEventHandler<HTMLDivElement>; onPointerDownCapture?: PointerEventHandler<HTMLDivElement>; onPointerMove?: PointerEventHandler<HTMLDivElement>; onPointerMoveCapture?: PointerEventHandler<HTMLDivElement>; onPointerUp?: PointerEventHandler<HTMLDivElement>; onPointerUpCapture?: PointerEventHandler<HTMLDivElement>; onPointerCancel?: PointerEventHandler<HTMLDivElement>; onPointerCancelCapture?: PointerEventHandler<HTMLDivElement>; onPointerEnter?: PointerEventHandler<HTMLDivElement>; onPointerLeave?: PointerEventHandler<HTMLDivElement>; onPointerOver?: PointerEventHandler<HTMLDivElement>; onPointerOverCapture?: PointerEventHandler<HTMLDivElement>; onPointerOut?: PointerEventHandler<HTMLDivElement>; onPointerOutCapture?: PointerEventHandler<HTMLDivElement>; onGotPointerCapture?: PointerEventHandler<HTMLDivElement>; onGotPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>; onLostPointerCapture?: PointerEventHandler<HTMLDivElement>; onLostPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>; onScroll?: UIEventHandler<HTMLDivElement>; onScrollCapture?: UIEventHandler<HTMLDivElement>; onScrollEnd?: UIEventHandler<HTMLDivElement>; onScrollEndCapture?: UIEventHandler<HTMLDivElement>; onWheel?: WheelEventHandler<HTMLDivElement>; onWheelCapture?: WheelEventHandler<HTMLDivElement>; onAnimationStart?: AnimationEventHandler<HTMLDivElement>; onAnimationStartCapture?: AnimationEventHandler<HTMLDivElement>; onAnimationEnd?: AnimationEventHandler<HTMLDivElement>; onAnimationEndCapture?: AnimationEventHandler<HTMLDivElement>; onAnimationIteration?: AnimationEventHandler<HTMLDivElement>; onAnimationIterationCapture?: AnimationEventHandler<HTMLDivElement>; onToggle?: ToggleEventHandler<HTMLDivElement>; onBeforeToggle?: ToggleEventHandler<HTMLDivElement>; onTransitionCancel?: TransitionEventHandler<HTMLDivElement>; onTransitionCancelCapture?: TransitionEventHandler<HTMLDivElement>; onTransitionEnd?: TransitionEventHandler<HTMLDivElement>; onTransitionEndCapture?: TransitionEventHandler<HTMLDivElement>; onTransitionRun?: TransitionEventHandler<HTMLDivElement>; onTransitionRunCapture?: TransitionEventHandler<HTMLDivElement>; onTransitionStart?: TransitionEventHandler<HTMLDivElement>; onTransitionStartCapture?: TransitionEventHandler<HTMLDivElement>; aria-activedescendant?: string; aria-atomic?: Booleanish; aria-autocomplete?: "none" | "list" | "inline" | "both"; aria-braillelabel?: string; aria-brailleroledescription?: string; aria-busy?: Booleanish; aria-checked?: boolean | "true" | "false" | "mixed"; aria-colcount?: number; aria-colindex?: number; aria-colindextext?: string; aria-colspan?: number; aria-controls?: string; aria-current?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date"; aria-describedby?: string; aria-description?: string; aria-details?: string; aria-disabled?: Booleanish; aria-dropeffect?: "link" | "none" | "copy" | "execute" | "move" | "popup"; aria-errormessage?: string; aria-expanded?: Booleanish; aria-flowto?: string; aria-grabbed?: Booleanish; aria-haspopup?: | boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree"; aria-hidden?: Booleanish; aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"; aria-keyshortcuts?: string; aria-label?: string; aria-labelledby?: string; aria-level?: number; aria-live?: "off" | "polite" | "assertive"; aria-modal?: Booleanish; aria-multiline?: Booleanish; aria-multiselectable?: Booleanish; aria-orientation?: "horizontal" | "vertical"; aria-owns?: string; aria-placeholder?: string; aria-posinset?: number; aria-pressed?: boolean | "true" | "false" | "mixed"; aria-readonly?: Booleanish; aria-relevant?: | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"; aria-required?: Booleanish; aria-roledescription?: string; aria-rowcount?: number; aria-rowindex?: number; aria-rowindextext?: string; aria-rowspan?: number; aria-selected?: Booleanish; aria-setsize?: number; aria-sort?: "none" | "ascending" | "descending" | "other"; aria-valuemax?: number; aria-valuemin?: number; aria-valuenow?: number; aria-valuetext?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; accessKey?: string; autoCapitalize?: | "off" | "none" | "on" | "sentences" | "words" | "characters" | string & object; autoFocus?: boolean; className?: string; contentEditable?: Booleanish | "inherit" | "plaintext-only"; contextMenu?: string; dir?: string; draggable?: Booleanish; enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send"; hidden?: boolean; id?: string; lang?: string; nonce?: string; slot?: string; spellCheck?: Booleanish; style?: CSSProperties; tabIndex?: number; title?: string; translate?: "yes" | "no"; radioGroup?: string; role?: AriaRole; about?: string; content?: string; datatype?: string; inlist?: any; prefix?: string; property?: string; rel?: string; resource?: string; rev?: string; typeof?: string; vocab?: string; autoCorrect?: string; autoSave?: string; color?: string; itemProp?: string; itemScope?: boolean; itemType?: string; itemID?: string; itemRef?: string; results?: number; security?: string; unselectable?: "off" | "on"; popover?: "" | "auto" | "manual" | "hint"; popoverTargetAction?: "toggle" | "show" | "hide"; popoverTarget?: string; inert?: boolean; inputMode?: | "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"; is?: string; exportparts?: string; part?: string; }	src/components/Async/Async.utils.ts:47

Example

// Multiple queries with custom error handling
const usersQuery = useQuery(...)
const postsQuery = useQuery(...)
<Async
  {...queriesToAsyncProps(
    [usersQuery, postsQuery],
    { error: { children: "Failed to load data" } }
  )}
>
  <UserList users={usersQuery.data} posts={postsQuery.data} />
</Async>