fix(react-router,solid-router): top-level Matches should use pendingComponent on root route

packages/react-router/src/Matches.tsx

@@ -12,6 +12,7 @@ import type {
   ValidateSelected,
 } from './structuralSharing'
 import type {
+  AnyRoute,
   AnyRouter,
   DeepPartial,
   Expand,
@@ -41,10 +42,12 @@ declare module '@tanstack/router-core' {
 
 export function Matches() {
   const router = useRouter()
+  const rootRoute: AnyRoute = router.routesById['__root__']
 
-  const pendingElement = router.options.defaultPendingComponent ? (
-    <router.options.defaultPendingComponent />
-  ) : null
+  const PendingComponent =
+    rootRoute.options.pendingComponent ?? router.options.defaultPendingComponent
+
+  const pendingElement = PendingComponent ? <PendingComponent /> : null
 
   // Do not render a root Suspense during SSR or hydrating from SSR
   const ResolvedSuspense =

packages/react-router/tests/Matches.test.tsx

@@ -121,3 +121,27 @@ test('when filtering useMatches by loaderData', async () => {
 
   expect(await screen.findByText('Incorrect Matches -')).toBeInTheDocument()
 })
+
+test('should show pendingComponent of root route', async () => {
+  const root = createRootRoute({
+    pendingComponent: () => <div>root pending...</div>,
+    loader: async () => {
+      await new Promise((r) => setTimeout(r, 50))
+    },
+  })
+  const index = createRoute({
+    getParentRoute: () => root,
+    path: '/',
+    component: () => <div>index route</div>,
+  })
+  const router = createRouter({
+    routeTree: root.addChildren([index]),
+    defaultPendingMs: 0,
+    defaultPendingComponent: () => <div>default pending...</div>,
+  })
+
+  const rendered = render(<RouterProvider router={router} />)
+
+  expect(await rendered.findByText('root pending...')).toBeInTheDocument()
+  expect(await rendered.findByText('index route')).toBeInTheDocument()
+})

packages/solid-router/src/Matches.tsx

@@ -8,6 +8,7 @@ import { matchContext } from './matchContext'
 import { Match } from './Match'
 import { SafeFragment } from './SafeFragment'
 import type {
+  AnyRoute,
   AnyRouter,
   DeepPartial,
   Expand,
@@ -44,16 +45,17 @@ export function Matches() {
       ? SafeFragment
       : Solid.Suspense
 
+  const rootRoute: () => AnyRoute = () => router.routesById['__root__']
+  const PendingComponent =
+    rootRoute().options.pendingComponent ??
+    router.options.defaultPendingComponent
+
   const OptionalWrapper = router.options.InnerWrap || SafeFragment
 
   return (
     <OptionalWrapper>
       <ResolvedSuspense
-        fallback={
-          router.options.defaultPendingComponent ? (
-            <router.options.defaultPendingComponent />
-          ) : null
-        }
+        fallback={PendingComponent ? <PendingComponent /> : null}
       >
         {!router.isServer && <Transitioner />}
         <MatchesInner />

packages/solid-router/tests/Matches.test.tsx

@@ -221,3 +221,27 @@ test('Matches provides InnerWrap context to defaultPendingComponent', async () =
   const indexElem = await app.findByText('context-for-default-pending')
   expect(indexElem).toBeInTheDocument()
 })
+
+test('should show pendingComponent of root route', async () => {
+  const root = createRootRoute({
+    pendingComponent: () => <div>root pending...</div>,
+    loader: async () => {
+      await new Promise((r) => setTimeout(r, 50))
+    },
+  })
+  const index = createRoute({
+    getParentRoute: () => root,
+    path: '/',
+    component: () => <div>index route</div>,
+  })
+  const router = createRouter({
+    routeTree: root.addChildren([index]),
+    defaultPendingMs: 0,
+    defaultPendingComponent: () => <div>default pending...</div>,
+  })
+
+  const rendered = render(() => <RouterProvider router={router} />)
+
+  expect(await rendered.findByText('root pending...')).toBeInTheDocument()
+  expect(await rendered.findByText('index route')).toBeInTheDocument()
+})