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