Loading for lazy-load strategy is not showing in react-router v7

[lukascivil]

What you were expecting:
RA lazy strategy with loading should work properly after update to react-router v7.

What happened instead:

Loading component not initiate in Suspense when update my App to react-router v7.

Steps to reproduce:

1. Create router that import lazy components;
2. Navigate with slow network to understand the problem, setted in the Browser;
3. Loading componente will not be initiated by RA Suspense;

This strategy solved my problem:
remix-run/react-router#12474

I think that we can put key inside the Suspense to solve the problem:

react-admin/packages/ra-ui-materialui/src/layout/Layout.tsx

Line 70 in 377f29f

<Suspense fallback={<Loading />}>

like:

function MyComp() {
  const location = useLocation()

  return (
    <Suspense 
      fallback={<LoadingComp text="Loading..." />}
      key={location.key}
    >
      <MyAwaitOrUseComp />
    </Suspense>
  )
}

Other information:

Environment

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

[djhi]

We don't lazy load anything in react-admin so I think you're talking about the lazy loading example in our documentation?

[djhi]

My bad, I missed the comment about our Layout. In any case, we use react-router v7 on the ecommerce demo and didn't notice any issue with lazy loading.

Can you provide a reproduction?

[lukascivil]

I think you can't notice because of the fast server response. Try to simulate the use of a slow internet, the loading component, provided by React Admin never runs. I think that this problem occurs because of the startTransition implemented in react-router v7.