KendoReact Grid Loading Indicator Issue - Inconsistent Behavior (v4.8.0)

[ANDURI]

Dear KendoReact Support Team,

I am experiencing an issue with the loading indicator on my KendoReact Grid, where it occasionally persists even after the data has successfully loaded from an API. This behavior is inconsistent, occurring on some screens of my application but not on others.

Here are the details of my setup:

• KendoReact Grid Version: @progress/kendo-react-grid@4.8.0

• Other KendoReact Packages:

  • @progress/kendo-react-excel-export@5.16.1

  • @progress/kendo-react-pdf@5.9.0

  • @progress/kendo-theme-default@4.41.1

• React Version: react@18.3.1, react-dom@18.3.1

• Build Tool: Vite (^6.0.2)

• Authentication: Auth0 (@auth0/auth0-react@2.2.4)

• State Management: Redux Toolkit (@reduxjs/toolkit@2.4.0), React Redux (react-redux@9.1.2)

• Date/Time Handling: Moment.js (moment@2.30.1)

Description of the Issue:

I have implemented a Higher-Order Component (withState) that wraps the KendoReact Grid. This HOC manages the data fetching (fetchData function), data state (pagination, sorting, filtering), and a local isLoading state.

My application currently controls a custom loading panel using this.state.isLoading. However, even when this.state.isLoading correctly transitions to false after a successful API response, the KendoReact Grid's own default loading indicator sometimes remains visible on certain pages. On other pages using the exact same withState HOC, the loading indicator disappears as expected.

I am not explicitly passing the loading prop to the KendoReact Grid component as part of its props currently, relying on its default behavior. My fetchData function correctly sets isLoading to true before the API call and to false in both the try (success) and catch (error) blocks.

Steps I have already taken/considered:

• Confirmed that this.state.isLoading is being set to false correctly upon API success/failure via console logs.

• Verified that API calls are completing successfully (HTTP 200 OK) on problematic screens.

• Checked for JavaScript errors in the browser console after the API response.

• Noted the version mismatch between @progress/kendo-react-grid@4.8.0 and other KendoReact 5.x.x packages, though I am unsure if this is directly contributing to this specific loading issue.

Expected Behavior: The KendoReact Grid's loading indicator should disappear promptly once the data fetch is complete and this.state.isLoading is set to false.

Request:

Could you please provide guidance on why the KendoReact Grid's default loader might persist despite the data being loaded and my internal loading state being reset? Are there specific scenarios or configurations related to version 4.8.0 that could cause this? Any recommendations for further debugging or best practices for controlling the grid's loading state in such a setup would be greatly appreciated.

Thank you for your time and assistance.

Sincerely,
Anduri

[Yanko]

Hi, Anduri,

The KendoReact Grid manages its own loading state internally if you do not explicitly control it using the `loading` prop. When the `loading` prop is not set, the Grid tries to infer loading based on the data flow, which might not always align with your custom logic, especially when using a Higher-Order Component (HOC) or custom data fetching logic. If you are showing a custom loading panel based on your `isLoading` state but not controlling the Grid `loading` prop, both your custom loader and the internal loader of the Grid may be rendered, leading to an inconsistent UI.

I noticed that you are using @progress/kendo-react-grid@4.8.0 alongside other KendoReact packages at version 5.x.x. Mixing major versions can result in unpredictable behavior, including visual inconsistencies or event handling issues. I suggest upgrading all KendoReact packages to the same major version (preferably the latest stable version). Version mismatches can cause subtle bugs and inconsistent behavior.

I hope this helps. If you have more questions, do not hesitate to ask. I will be happy to help.

Regards,
Yanko
Progress Telerik