Async component

Component này cho phép truyền vào status và hiển thị success, error, hoặc error UI

Ví dụ

import { AsyncComponent } from '@xobuilder/ui';

export const Demo = () => {
  const { status, data } = getData();

  return (
    <AsyncComponent 
      status={status}
      success={() => <div>{JSON.stringify(data)}</div>}

      // Optional
      isEmpty={data.length === 0}
      loading={<AsyncComponent.Loading variant="skeleton-page" />}
      error={<AsyncComponent.Error message="Error" />}
      empty={<AsyncComponent.Empty message="Empty" />}
    />
  )
}

AsyncComponent Props

Name	Type	Default	Description
status	Status	idle	Trạng thái của component
success	ReactNode	-	Component hiển thị khi status là success
loading	ReactNode	<AsyncComponent.Loading variant="spinner" />	Component hiển thị khi status là loading
error	ReactNode	<AsyncComponent.Error />	Component hiển thị khi status là error
empty	ReactNode	<AsyncComponent.Empty />	Component hiển thị khi isEmpty là true
isEmpty	boolean	false	Trạng thái empty của component

AsyncComponent.Empty Props

Name	Type	Default	Description
message	string	No data	Message hiển thị

AsyncComponent.Error Props

Name	Type	Default	Description
message	ReactNode	Error	InlineErrorProps message
fieldID	string	-	InlineErrorProps fieldID

AsyncComponent.Loading Props

Name	Type	Default	Description
variant	spinner | skeleton-page | skeleton-tabs | skeleton-body-text | skeleton-display-text	spinner	Loại loading ứng với từng component loading của polaris