Can see Suspense fallback for clientLoader

[violabg]

I'm using React Router as a...

framework

Reproduction

https://codesandbox.io/p/github/violabg/react-router-v7-suspense/draft/cocky-kilby?workspaceId=ws_NFYTg4TpNKq2WR4UjdiEhU

System Info

"dependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@mui/material": "^6.4.4",
    "@mui/x-data-grid": "^7.26.0",
    "@react-router/node": "^7.1.5",
    "@react-router/serve": "^7.1.5",
    "isbot": "^5.1.17",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router": "^7.1.5"
  },
  "devDependencies": {
    "@react-router/dev": "^7.1.5",
    "@types/node": "^20",
    "@types/react": "^19.0.1",
    "@types/react-dom": "^19.0.1",
    "@vitejs/plugin-react": "^4.3.4",
    "react-router-devtools": "^1.1.0",
    "typescript": "^5.7.2",
    "vite": "^5.4.11",
    "vite-tsconfig-paths": "^5.1.4"
  }

Used Package Manager

pnpm

Expected Behavior

as per documentation https://reactrouter.com/how-to/suspense#streaming-with-suspense
When pressing the Data link I should't wait for page loader to resolve but I should see the fallback

Actual Behavior

When pressing the Data link it stays on the Home page untile the loader is done instead of showing the fallback for Data loader

[pawelblaszczyk5]

The given code sandbox is private. But I guess it’s related to the fact that for client side navigations React startTransition is used so that alters behavior of Suspense boundaries a bit

[timdorr]

Upon first load, the clientLoader is still in a loading state, so the fallback should be shown while it resolves. This is expected behavior.

[violabg]

I’m adding the repo so you can check is this is the aspected behavior

https://github.com/violabg/react-router-v7-suspense

But if it is, was is the doc https://reactrouter.com/how-to/suspense#streaming-with-suspense referring to here?