> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <Chart.Loading />

> A placeholder drawn while a chart's data is loading.

```js theme={"system"}
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](../../guides/using-charts) for height tokens and the other chart types.

## Example

```tsx TypeScript theme={"system"}
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

<ParamField path="height" type="'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](../../guides/using-charts#height).
</ParamField>