Repository navigation
Router defaultPendingComponent Not effective(version:1.121.24) #4467
Description
Which project does this relate to?
Router
Describe the bug
import {
createRootRoute,
createRouter,
lazyRouteComponent,
RouterProvider
} from '@tanstack/react-router'
function Loading() {
return (
<div
style={{
position: 'fixed',
left: 0,
top: 0,
backgroundColor: 'red',
width: '100%',
height: '100%'
}}
>
loading
</div>
)
}
const RootRoute = createRootRoute({
component: lazyRouteComponent(() => import('./Comp01')),
pendingComponent: Loading
})
function RouterApp() {
const router = createRouter({
routeTree: RootRoute,
defaultPreload: 'intent',
scrollRestoration: true,
defaultPendingComponent: Loading
})
return <RouterProvider router={router} />
}
export default function Demo() {
return <RouterApp />
}Your Example Website or App
code route
Steps to Reproduce the Bug or Issue
import {
createRootRoute,
createRouter,
lazyRouteComponent,
RouterProvider
} from '@tanstack/react-router'
function Loading() {
return (
<div
style={{
position: 'fixed',
left: 0,
top: 0,
backgroundColor: 'red',
width: '100%',
height: '100%'
}}
>
loading
</div>
)
}
const RootRoute = createRootRoute({
component: lazyRouteComponent(() => import('./Comp01')),
pendingComponent: Loading
})
function RouterApp() {
const router = createRouter({
routeTree: RootRoute,
defaultPreload: 'intent',
scrollRestoration: true,
defaultPendingComponent: Loading
})
return <RouterProvider router={router} />
}
export default function Demo() {
return <RouterApp />
}Expected behavior
I hope there will be a loading effect when refreshing the webpage, but now the loading component is not working. I don't know if what I wrote is correct, but I am referring to the example on the official website
Screenshots or Videos
No response
Platform
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Version: [e.g. 91.1]
Additional context
No response
Activity
leesb971204 commentedon Jun 20, 2025
Even if a beforeLoad or loader exists on the root route, the PendingComponent is not displayed.
schiller-manuel commentedon Jun 20, 2025
does this need wrapInSuspense:true on the root node?
yibird commentedon Jun 20, 2025
I have used it, but it has no effect
yibird commentedon Jun 20, 2025
Setting the loader is effective, but I expect it to display 'pending component' instead of 'white screen' during route loading
schiller-manuel commentedon Jun 20, 2025
do we have an example that is using a lazy root component? I am not sure this is supported
leesb971204 commentedon Jun 20, 2025
It doesn’t seem to be an issue with the lazy component.
Even when defining the component without using lazy, the pendingComponent defined in createRootRoute doesn’t render.
However, the defaultPendingComponent does render.
Also, for me, wrapInSuspense: true does have an effect. why?
mversic commentedon Jul 15, 2025
t is my observation that the pending component is not having effect on lazy routes.
yes, it's possible that it's also not working for root route in general. You should try using a pending component on a lazy route that is not root route to observe the bug
schiller-manuel commentedon Jul 15, 2025
@mversic can you please provide a complete minimal reproducer?
leesb971204 commentedon Jul 16, 2025
I’m not entirely sure if I understood everything correctly, but it seems like the bug does not occur on
lazy routethat are not theroot route.I created two test cases:
1. When the
root routeis lazy (https://stackblitz.com/edit/tanstack-router-yetyygmq?file=src%2Fmain.tsx)2. When a
non-root routeis lazy (https://stackblitz.com/edit/tanstack-router-t3j5bz2q?file=src%2Froutes%2Fabout.tsx)Here’s the summary of what I observed:
⸻
When the
root routeis lazy:1. If only
loaderis defined →defaultPendingComponentis shown2. If both
loaderandwrapInSuspenseare set → the route’s ownpendingComponentis shown3. If only
wrapInSuspenseis defined → nopendingComponentis shown4. If neither is set → no
pendingComponentis shown⸻
When a
non-root routeis lazy:Even without defining a
loader, the route’s ownpendingComponentis displayed - In fact, even if you remove theloaderfrom the about route in the second link, thependingComponentstill displays correctly when navigating to theaboutpage.Please let me know if I’m misunderstanding anything!
goatrenterguy commentedon Jan 14, 2026
Running into the same issue on
1.149.3. Addingloader: () => {}to each lazy route fixes it but this is not an ideal solutiondeivisonrpg commentedon Apr 15, 2026
Same here with 1.168.2 . Adding
loader: () => {}to each lazy route fixes it.schiller-manuel commentedon Apr 15, 2026
@deivisonrpg do you have a lazy root route? this is not supported (and doesnt make sense IMO as it will be loaded always )