• What is KendoReact
  • Getting Started
  • Server Components
  • Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Render a Loading Indicator


Product Version4.5.0
ProductProgress® KendoReact


How to show a loading indication when loading data.


Rendering Loading Indicator

When the KendoReact Data Grid contains a huge amount of records and depending on the browser, the component might take longer to load its data.

In such cases, a loading indicator is suitable to indicate that the Grid is properly functioning and that its data will soon be displayed.

The following example demonstrates how to render a loading indicator once a request is made and hide it when the request is finished successfully.

View Source
Change Theme:


  1. Create a component that will manage the data operations and the requests. This component will separate the data request and response logic from the declaration of the Grid.

        <Grid ...gridOptions></Grid>
        dataReceived = (products) => {
                products: products
  2. Inside the ProductLoader component, indicate to the Grid when to display the loading indicator. The time when the loading indicator will be rendered depends on the logic of the application.

        this.pending = toODataString(this.props.dataState);
        fetch(this.baseUrl + this.pending, this.init)
            .then(response => response.json())
            .then(json => {
                this.lastSuccess = this.pending;
                this.pending = '';
                if (toODataString(this.props.dataState) === this.lastSuccess) {
                    this.props.onDataReceived.call(undefined, {
                        data: json.value,
                        total: json['@odata.count']
                } else {
        render() {
            return this.pending && <LoadingPanel />;
  3. Create a component that will show the k-loading-mask over the Grid container.

        class LoadingPanel extends React.Component {
        render() {
            const loadingPanel = (
                <div className="k-loading-mask">
                    <span className="k-loading-text">Loading</span>
                    <div className="k-loading-image"></div>
                    <div className="k-loading-color"></div>
            const gridContent = document && document.querySelector('.k-grid-content');
            return gridContent ? ReactDOM.createPortal(loadingPanel, gridContent) : loadingPanel;