How to Set Up a Loading State for Embedded Insights
The components BaseChart, Execute, Kpi, Table, and Visualization imported from @gooddata/react-components
contain the onLoadingChanged
property.
The onLoadingChanged
property is a function that returns either a { isLoading: true }
object or a { isLoading: false }
object.
To your local state, add a flag that indicates whether the GoodData component is currently loading or not based on what object is returned. Based on this flag, define what custom-styled loading element should be shown while the GoodData component is loading.
Example
This example uses data from the GoodSales demo project. For testing purposes, you can use this snippet as is.
import React, { PureComponent } from 'react';
import { Visualization } from '@gooddata/react-components';
export default class SampleVisualization extends PureComponent {
constructor(props) {
super(props);
this.onLoadingChanged = this.onLoadingChanged.bind(this);
this.state = {
isLoading: true
};
}
onLoadingChanged({ isLoading }) {
this.setState({
isLoading
});
}
renderLoading() {
if (this.state.isLoading) {
return (
<div>Loading</div>
);
}
return null;
}
renderVisualization() {
return (
<Visualization
identifier="aby3polcaFxy"
projectId="la84vcyhrq8jwbu4wpipw66q2sqeb923"
onLoadingChanged={this.onLoadingChanged}
/>
);
}
render() {
return (
<div style={{ height: 400, width: 600 }}>
{this.renderLoading()}
{this.renderVisualization()}
</div>
);
}
}