Render a Loading Indicator

Environment

Product Version	4.5.0
Product	Progress® KendoReact Grid

Description

How to show a loading indication when loading data.

Solution

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.

Change Theme

Theme

Loading ...

Setup

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.

   jsx

       <Grid ...gridOptions></Grid>
       <ProductsLoader
           dataState={this.state.dataState}
           onDataReceived={this.dataReceived}
       />
   
       dataReceived = (products) => {
           this.setState({
               ...this.state,
               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.

   jsx

       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 {
                   this.requestDataIfNeeded();
               }
           });
       }

   jsx

       render() {
           this.requestDataIfNeeded();
           return this.pending && <LoadingPanel />;
       }

3. Create a component that will show the k-loading-mask over the Grid container.

   jsx

       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>
               </div>
           );
   
           const gridContent = document && document.querySelector('.k-grid-content');
           return gridContent ? ReactDOM.createPortal(loadingPanel, gridContent) : loadingPanel;
       }
     }