createRootRoute does not render the pending component on initial page visit #2182

Activity

1. luansevero commented on Sep 7, 2024

   

   luansevero

   on Sep 7, 2024

   More actions

   Need to set the wrapInSuspense option to true

   import { Outlet, createRootRoute } from '@tanstack/react-router';
   
   export const Route = createRootRoute({
     component: () => (
       <>
         <h1>Hello Root</h1>
         <Outlet />
       </>
     ),
     loader: () => new Promise((resolve) => setTimeout(resolve, 2000)),
     wrapISuspense: true,
     pendingComponent: () => <h2>pending</h2>,
   });
   

   👍React with 👍2Reacted by Islom Khushnazarov and JinJieBeWater

   🚀React with 🚀2Reacted by Mosh Feu and JinJieBeWater
2. SalzstangeSalamiBrief commented on Sep 9, 2024

   

   SalzstangeSalamiBrief

   on Sep 9, 2024

   Author

   More actions

   Thanks for you answer.
   After setting the suggested flag the pendingComponent is properly displayed.
   But now I am a bit confused:
   As a substitute i used the defaultPendingComponent while initializing the router via createRouter:

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { RouterProvider, createRouter } from '@tanstack/react-router';
   import { routeTree } from './routeTree.gen';
   
   // Set up a Router instance
   const router = createRouter({
     routeTree,
     defaultPendingComponent: () => <h2>Main Pending</h2>
   });
   
   // Register things for typesafety
   declare module '@tanstack/react-router' {
     interface Register {
       router: typeof router;
     }
   }
   
   const rootElement = document.getElementById('app')!;
   
   if (!rootElement.innerHTML) {
     const root = ReactDOM.createRoot(rootElement);
     root.render(<RouterProvider router={router} />);
   }

   This renders the pending component while the loader in __root.tsx is not resolved without using wrapInSuspense flag.
   Do you know why that is?
3. TkDodo commented on Nov 23, 2024

   

   TkDodo

   on Nov 23, 2024

   Contributor

   More actions

   This code here shows that having wrapInSuspense: true is necessary for root routes:

   router/packages/react-router/src/Match.tsx

   Lines 52 to 54 in 55a2727

   	const ResolvedSuspenseBoundary =
   	// If we're on the root route, allow forcefully wrapping in suspense
   	(!route.isRoot || route.options.wrapInSuspense) &&

   So maybe it just needs documenting?

   I’m not entirely sure why adding a defaultPendingComponent changes this. @schiller-manuel ?
4. jakec-dev commented on Mar 11, 2025

   

   jakec-dev

   on Mar 11, 2025

   More actions

   This doesn't seem to work in Tanstack Start. I don't see the pending component as the loader is running. The favicon spins showing the route is loading, then it just loads the component.

   Note this includes fixing the typo wrapISuspense

   Need to set the wrapInSuspense option to true

   import { Outlet, createRootRoute } from '@tanstack/react-router';
   
   export const Route = createRootRoute({
     component: () => (
       <>
         <h1>Hello Root</h1>
         <Outlet />
       </>
     ),
     loader: () => new Promise((resolve) => setTimeout(resolve, 2000)),
     wrapInSuspense: true,
     pendingComponent: () => <h2>pending</h2>,
   });
   

   👍React with 👍4Reacted by William Neves, Adnan Pedroso, jam-fran and Albert Riedinger
5. Sheraff

   added a commit that references this issue on Jul 4, 2026

   test: pin 24 community-reported issues fixed by the match-loading wor…

   ...

   60eb597
6. LadyBluenotes

   added the

   Bug

   issue type on Jul 11, 2026
7. Sheraff

   closed this as completedon Jul 13, 2026