Loading animation in React Grid component - How to indicate null is not the data.

Question

The grid has an option to show a loading indicator in-between the time of fetching the data and binding it to the grid during initial rendering or refreshing or after performing any grid action like sorting, filtering, grouping, and more. The grid supports two indicator types, which is achieved by setting the loadingIndicator.indicatorType property to Shimmer.

1.The problem is it considers null as a data, When making an API call it needs to display the animation till it gets back the API result.But now it displays animation for a second and considers null as a data until it gets the API result.

2.What are the options to indicate the it didn't get the API result , so it needs it display animation.

Vikram Sundararajan · Answer

Hi Viji,Greetings from Syncfusion Support,We understand your concern about displaying a loading
animation while waiting for API results. To achieve this, we recommend using
the showMaskRow method. This function allows you to present a loading mask or
animation during the data retrieval process within a Syncfusion Essential JS 2
(EJ2) grid component.By implementing gridInstance.showMaskRow() within the
created event, you effectively instruct the grid to display the loading
animation right from the component's initial creation. This visual cue informs
users that data is currently being fetched, and they should patiently await the
data to load. Please refer the below code snippet and sample for more
information,

[index.js] 
   
  const created = () => {
      gridInstance.showMaskRow();
      };

Sample: https://stackblitz.com/edit/react-ufvyqn-hhbnvw?file=index.jsPlease get back us if you need further assistance.Regards,Vikram S