<Chart.Loading /> - Attio Docs

import {Chart} from "attio/client"

Chart is a namespace, not a renderable component. Use Chart.Loading. Give this the same height as the chart it stands in for, and the dialog will not reflow when the data lands. See Using charts for height tokens and the other chart types.

Example

TypeScript

import {Chart} from "attio/client"

type Props = {
  isPending: boolean
  total: number
}

export function MyDialog({isPending, total}: Props) {
  if (isPending) {
    return <Chart.Loading height="large" />
  }

  return <Chart.Metric value={total} label="Revenue" format="currency" currency="USD" />
}

Props

'small' | 'medium' | 'large' | 'extraLarge'

The height of the placeholder. Use the same token as the chart that will replace it.Defaults to "medium" (240px). See Using charts.