> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# LoadingComponent

> Customize or disable the LoadingComponent indicator shown while a GoodData.UI visualization fetches data.

API reference: [LoadingComponent()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.loadingcomponent/index.md) (function)

The [`LoadingComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.loadingcomponent/index.md) prop lets you customize what a visualization component renders while it's loading data. To hide the loading state, pass a component that renders nothing.

All visualization components support the [`LoadingComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.loadingcomponent/index.md) prop. The default [`LoadingComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.loadingcomponent/index.md) is exported from `@gooddata/sdk-ui`, so you can also render it yourself with different props. Its defaults are a three-dot animation 8px high (`imageHeight`), animated at `speed` 1, in the theme's complementary gray (`color`), filling the available height (`height="100%"`) as a block element (`inline={false}`).

## [Example: disabled LoadingComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/interactivity/loading-component/#example-disabled-loadingcomponent)

In the following example, the [`Kpi`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.kpi/index.md) component shows neither the loading indicator nor the error message.

```tsx
import { Kpi } from "@gooddata/sdk-ui";
import * as Md from "./catalog.js";

<Kpi measure={Md.$FranchiseFees} LoadingComponent={() => null} ErrorComponent={() => null} />;
```

## [Example: customized LoadingComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/interactivity/loading-component/#example-customized-loadingcomponent)

In the following example, the default [`LoadingComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.loadingcomponent/index.md) is customized with a color, a fixed height, an indicator size, and an animation speed.

```tsx
import { Kpi, LoadingComponent } from "@gooddata/sdk-ui";
import * as Md from "./catalog.js";

const CustomLoading = () => <LoadingComponent color="tomato" height={300} imageHeight={16} speed={2} />;

<Kpi measure={Md.$FranchiseFees} LoadingComponent={CustomLoading} />;
```

## [Props](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/interactivity/loading-component/#props)

| Prop | Type | Required | Description | Inherited from |
|------|------|----------|-------------|----------------|
| [`className`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iloadingprops/index.md#iloadingpropsclassname) | `string` | No | — | — |
| [`color`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iloadingprops/index.md#iloadingpropscolor) | `string` | No | — | — |
| [`height`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iloadingprops/index.md#iloadingpropsheight) | `any` | No | — | — |
| [`imageHeight`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iloadingprops/index.md#iloadingpropsimageheight) | `any` | No | — | — |
| [`imageWidth`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iloadingprops/index.md#iloadingpropsimagewidth) | `any` | No | — | — |
| [`inline`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iloadingprops/index.md#iloadingpropsinline) | `boolean` | No | — | — |
| [`speed`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iloadingprops/index.md#iloadingpropsspeed) | `number` | No | — | — |
| [`width`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iloadingprops/index.md#iloadingpropswidth) | `any` | No | — | — |