pending component is not shown when navigating to the route which does not have beforeLoad or loader functions

[valerii15298]

Which project does this relate to?

Router

Describe the bug

Using file based routing when navigation to a new route which does not have beforeLoad or loader functions, pending component is not shown until js bundle for that route page is fetched.

Your Example Website or App

#3555

Steps to Reproduce the Bug or Issue

1. Go to cd examples/react/basic-file-based/ example in PR reproduction.
2. npm install && npm run start in the example
3. open example in the browser
4. add new custom throttling config under the chrome network dev tools with these values:
   1kb download/upload and 4000ms latency.
5. go to root / route in the example and hard reload the page.
6. under the network switch to the newly created throttling config 1kb 4s latency
7. click the posts button link

Actual behavior: page content in browser does not change even though url is updated to /posts and when js bundle is loaded (up to 30s) posts page is shown. So pending component is never shown

Expected behavior

pending component is shown

Screenshots or Videos

https://vimeo.com/1059916543/32942fbde4

Platform

• OS: MacOS
• Browser: Chrome
• Version: 133.0.6943.127 (Official Build) (arm64)

Additional context

In order to fix this issue we need to add one of these functions to route config to which we navigate:
beforeLoad or loader.

But the best way to fix it for all routes is just to add loader to __root.tsx file like this:

export const Route = createRootRouteWithContext()({
  loader: () => void 0,
  component: () => (
    <>
      <Root />
      <TanStackRouterDevtools position="top-right" />
    </>
  ),
});

Check out in reproduction PR these functions are commented. If we uncomment them the pending component is shown and issue no longer exists.

Discord discussion link: https://discord.com/channels/719702312431386674/1343677586345295973