LoadingComponent

LoadingComponent indicator is a property that enables you to customize what content is displayed when a visual component is in its loading state. You can disable the default setting of the LoadingComponent indicator by explicitly passing null instead.

The LoadingComponent indicator is supported by all visualization components.

Example: Disabled LoadingComponent

In the following example, the KPI shows neither the loading indicator nor the error message.

import { Kpi } from "@gooddata/sdk-ui";
import * as Ldm from "./ldm/full";

<Kpi
    measure={Ldm.$FranchiseFees}
    format="<format>"
    LoadingComponent={null}
    ErrorComponent={null}
/>

Example: Customized LoadingComponent

In the following example, the default LoadingComponent is customized with color, fixed size, indicator size, and speed of animation.

import React, { Component } from "react";
import { Kpi, LoadingComponent } from "@gooddata/sdk-ui";
import * as Ldm from "./ldm/full";

export class CustomisedLoadingComponentExample extends Component {
    render() {
        return (
            <LoadingComponent
                color="tomato"
                height={300}
                imageHeight={16}
                speed={2}
            />
        );
    }
}

export default CustomisedLoadingComponentExample;

<Kpi
    measure={Ldm.$FranchiseFees}
    LoadingComponent={CustomisedLoadingComponentExample}
/>