KendoReact Data Grid Loading Indicator
The Data Grid has a built in KendoReact Loader component that displays a loading indicator over the grid's content while data is being fetched. This feature helps users understand that data is still being processed rather than assuming the grid is empty or unresponsive.
Use React Interactivity for FreeYou can use the free components from the React Interactivity package in production—no sign-up or license required. Interactivity is part of KendoReact, an enterprise-grade UI library with 120+ free and premium components. To test-drive premium components, start a 30-day trial.Built-in Loading Indicator
To enable the built-in loading overlay, set the showLoader of the Grid to true.
The following example demonstrates how the built-in loader functions when data is being loaded:
Custom Loading Indicator
For more flexibility, the KendoReact Data Grid also allows you to replace the default loader with a fully customizable loading indicator. This is particularly useful if you want to match the loading state with your application's design language or provide additional context while data is being retrieved.
To use a custom loading indicator, pass your custom component to the loader prop.
You can see a sample implementation of a custom loading indicator for the Grid in the Demo below.