Make Datagrid loading timeout configurable

[mariomartinez81]

What you were expecting:

I expect the Datagrid component skeleton to be displayed while the data is being retrieved, or for it to receive a loading property, so that external manipulation can be performed, since skeletons are not displayed.

What happened instead:

The Skeleton of the built-in Datagrid component isn't displaying; this is due to internal delays in the components added on purpose.

Steps to reproduce:

1. Use a list with the Datagrid.
2. Check the rendering of the default skeleton while loading the data.
3. Check the components that have a timeout.

Related code:

• Preferably, a sandbox forked from

  • https://codesandbox.io/p/github/marmelab/react-admin-sandbox/main (v5)

  • https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple (v5)

  • https://stackblitz.com/github/marmelab/react-admin/tree/4.x/examples/simple (v4)

• A link to a GitHub repo with the minimal codebase to reproduce the issue

insert short code snippets here

Other information:

Additionally, you have the DatagridLoading component, which also uses a timer from its input.

Environment

• React-admin version: 6.9.1
• Last version that did not exhibit the issue (if applicable):
• React version: 19.1
• Browser: Chrome
• Stack trace (in case of a JS error):

[slax57]

Thank you for your report.
As you seem to have found out, this behavior is done on purpose.
So can you please explain what you consider to be an issue here? Are you requesting the timeout to be configurable, in which case we need to consider this issue as a feature request?
Please clarify what you expect here.

Also, please use English only, as this issue, just like the whole react-admin repo, needs to be accessible and understandable by everyone. Thanks.

[mariomartinez81]

Thank you for your response. I really appreciate it.
The problem is that the DataGrid Skeleton, which should be displayed while the data is loading, does NOT appear. This results in the screen appearing blank and then suddenly displaying the data all at once (without a loader), which is causing a poor user experience (we’ve received many requests regarding this). The loader never shows.
We tried creating a custom component to mitigate this issue, but when integrating it, we lose the caching that React-Admin handles internally through TanStack Query.

I ran a local test by modifying the components directly in the node_modules folder (in the dist directory), and found that the issue is caused by a hardcoded timeout (1000), which is what triggers the problem.

The expected behavior is that the loading indicator is displayed while the data is being fetched. If the component needs a timeout, it should receive that delay time via props — both from the DataGrid component and from the DataGridLoading component.

Thank you very much for addressing my request

[slax57]

Thank you for your reply.
I confirm that rendering the loading skeleton only after 1000ms of loading time is the intended behavior.
This prop is not (yet) overridable, otherwise it would be documented.
However I agree this would be a nice addition, so I'm keeping this issue open as a feature request.

Would you like to open a PR to introduce that prop to Datagrid and forward it to DatagridLoading?