fix(solid-router): respect wrapInSuspense

packages/solid-router/src/Match.tsx

@@ -77,18 +77,26 @@ export const Match = (props: { routeId: string }) => {
     ? ((route.options as RootRouteOptions).shellComponent ?? SafeFragment)
     : SafeFragment
 
+  const ResolvedSuspenseBoundary = () =>
+    routeOptions().wrapInSuspense === false ? SafeFragment : Solid.Suspense
+
+  const renderPendingComponentFallback = () => {
+    if (routeOptions().wrapInSuspense === false) {
+      return undefined
+    }
+    if (process.env.NODE_ENV !== 'production') {
+      return renderInNonRouteComponentContext(
+        () => <Dynamic component={resolvePendingComponent()} />,
+        'pendingComponent',
+      )
+    }
+    return <Dynamic component={resolvePendingComponent()} />
+  }
+
   const MatchContent = () => (
     <Solid.Show
       when={currentMatch().status !== 'pending'}
-      fallback={(() => {
-        if (process.env.NODE_ENV !== 'production') {
-          return renderInNonRouteComponentContext(
-            () => <Dynamic component={resolvePendingComponent()} />,
-            'pendingComponent',
-          )
-        }
-        return <Dynamic component={resolvePendingComponent()} />
-      })()}
+      fallback={renderPendingComponentFallback()}
     >
       <MatchInner />
     </Solid.Show>
@@ -97,20 +105,15 @@ export const Match = (props: { routeId: string }) => {
   return (
     <ShellComponent>
       <nearestMatchContext.Provider value={nearestMatch}>
-        <Solid.Suspense
+        <Dynamic
+          component={ResolvedSuspenseBoundary()}
           fallback={(() => {
             // Data-only SSR renders the inner fallback on the server, so
             // avoid adding an extra suspense fallback on the client.
             if (shouldSkipSuspenseFallback()) {
               return undefined
             }
-            if (process.env.NODE_ENV !== 'production') {
-              return renderInNonRouteComponentContext(
-                () => <Dynamic component={resolvePendingComponent()} />,
-                'pendingComponent',
-              )
-            }
-            return <Dynamic component={resolvePendingComponent()} />
+            return renderPendingComponentFallback()
           })()}
         >
           <Dynamic
@@ -187,7 +190,7 @@ export const Match = (props: { routeId: string }) => {
               </Solid.Switch>
             </Dynamic>
           </Dynamic>
-        </Solid.Suspense>
+        </Dynamic>
       </nearestMatchContext.Provider>
 
       {renderScrollRestoration?.(router, route)}

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

@@ -155,6 +155,37 @@ test('should show pendingComponent of root route', async () => {
   expect(await rendered.findByTestId('root-content')).toBeInTheDocument()
 })
 
+test('wrapInSuspense false prevents route pendingComponent suspense fallback', async () => {
+  const gate = createControlledPromise<void>()
+  const history = createMemoryHistory({ initialEntries: ['/posts'] })
+  const root = createRootRoute({
+    component: () => <Outlet />,
+  })
+  const postsRoute = createRoute({
+    getParentRoute: () => root,
+    path: '/posts',
+    wrapInSuspense: false,
+    pendingComponent: () => <div data-testid="posts-pending">Loading</div>,
+    loader: () => gate,
+    component: () => <div>Posts content</div>,
+  })
+
+  const router = createRouter({
+    routeTree: root.addChildren([postsRoute]),
+    history,
+    defaultPendingMs: 0,
+  })
+
+  render(() => <RouterProvider router={router} />)
+
+  await waitFor(() => expect(router.state.status).toBe('pending'))
+  expect(screen.queryByTestId('posts-pending')).not.toBeInTheDocument()
+
+  gate.resolve()
+
+  expect(await screen.findByText('Posts content')).toBeInTheDocument()
+})
+
 test('useMatchRoute follows superseding pending locations', async () => {
   const aGate = createControlledPromise<void>()
   const bGate = createControlledPromise<void>()