Nested suspense failing to show loader in RRv7 framework

[Adaxelx]

I'm using React Router as a framework

Reproduction

After migration from remix v2 to react-router v7 one of flows on my pages stopped working. Here is simple reproduction of that behaviour.

Go to https://codesandbox.io/p/devbox/nested-suspense-gx2ks9 and click "Click here" link. Then you should see "loading visible..." message for 4s and then next link "Go to next page". After clicking that there should be change in url (/new/1234) but you should still see "Go to next page" link. After some time there will be flash of "loading failed" and then message "before that should be loader lasting 4 seconds (only flash)".

System Info

System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (2) x64 AMD EPYC
    Memory: 1.82 GB / 4.14 GB
    Container: Yes
    Shell: Unknown
  Binaries:
    Node: 20.12.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.5.0 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/share/npm-global/bin/pnpm
  npmPackages:
    @react-router/dev: ^7.1.5 => 7.3.0 
    @react-router/fs-routes: ^7.3.0 => 7.3.0 
    @react-router/node: ^7.1.5 => 7.3.0 
    @react-router/serve: ^7.1.5 => 7.3.0 
    react-router: ^7.1.5 => 7.3.0 
    vite: ^6.1.0 => 6.2.2

Used Package Manager

npm

Expected Behavior

After clicking "Go to next page" you should immediately see "loading failed" for 4s and then message "before that should be loader lasting 4 seconds (only flash)" should be visible. (In remix v2 that worked)

Actual Behavior

After clicking "Go to next page" there is no change for some time (despite change in url) then message "loading failed" just flashing for fraction of second and then message "before that should be loader lasting 4 seconds (only flash)" is visible.

[timdorr]

You're rendering the same tree for the Suspense component, so React is re-using this instance. Since it has already suspended and loaded, it doesn't show the fallback. A fix for this would be to use a key prop so that React knows they are different instances.

[ydkdev]

You're rendering the same tree for the Suspense component, so React is re-using this instance. Since it has already suspended and loaded, it doesn't show the fallback. A fix for this would be to use a key prop so that React knows they are different instances.

I’ve added a key prop to both Suspense components, but when I click "Go to next page," it doesn’t immediately display "loading failed"—it only appears after the loader resolves. Is there anything else I haven’t done yet?

Here’s the reproduction link: https://codesandbox.io/p/devbox/nested-suspense-forked-5pz3p4

[uvtzxpm]

It's possibly a similar problem to this: #12474

🙂

[Adaxelx]

@timdorr as you can see this doesn't work. Can you reopen this issue?

[Adaxelx]

It's possibly a similar problem to this: #12474

🙂

yes, I had been looking at this before I opened this issue. And there also was suggestion with key that didn't work for me.

[Adaxelx]

@timdorr Should I open new issue or can we reopen that? Because I this still doesn't work