> ## 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.

# <LoadingState />

> A component for showing a loading spinner.

<img className="dark:hidden" width="720" height="440" noZoom src="https://mintcdn.com/attio/cpLfJrYJydXO11DY/images/loading-state.png?fit=max&auto=format&n=cpLfJrYJydXO11DY&q=85&s=8138b2c5da435cc92e2d5cb9e6a67bf6" data-path="images/loading-state.png" />

<img className="hidden dark:block" width="720" height="440" noZoom src="https://mintcdn.com/attio/cpLfJrYJydXO11DY/images/loading-state-dark.png?fit=max&auto=format&n=cpLfJrYJydXO11DY&q=85&s=897c32dbff2c9be8b022777c2d98137a" data-path="images/loading-state-dark.png" />

```js theme={"system"}
import {LoadingState} from "attio/client"
```

When used inside a [dialog](../dialogs/show-dialog), this component will fill the entire Dialog, hiding any other UI.

`LoadingState` can be very useful as a `fallback` for [`React.Suspense`](https://react.dev/reference/react/Suspense).

<Tip>
  [Dialogs](../dialogs/show-dialog) are already suspenseful!

  If any React code in your dialog suspends, a loading state will be shown automatically.

  This component is only for when you need to control the message shown during loading.
</Tip>

## Props

<ParamField path="children" type="string">
  An optional message to display next to the spinner. e.g. `"Loading contacts..."`.

  Defaults to `"Loading..."`.
</ParamField>