fix: too many suspenses!

TanStack · Aug 4, 2023 · a7d5975 · a7d5975
1 parent 642a334
commit a7d5975
Show file tree

Hide file tree

Showing 4 changed files with 406 additions and 425 deletions.
diff --git a/examples/react/quickstart/src/main.tsx b/examples/react/quickstart/src/main.tsx
@@ -17,8 +17,8 @@ const rootRoute = new RootRoute({
       <>
         <div>
           <Link to="/">Home</Link>{' '}
-          <Link to="/lazy-without-suspsense">Lazy without suspense</Link>{' '}
-          <Link to="/lazy-with-suspsense">Lazy with suspense</Link>{' '}
+          <Link to="/lazy-without-suspense">Lazy without suspense</Link>{' '}
+          <Link to="/lazy-with-suspense">Lazy with suspense</Link>{' '}
           <Link to="/with-loader">With loader</Link>
         </div>
         <hr />
@@ -38,31 +38,31 @@ const indexRoute = new Route({
 
 const lazyWithoutSuspense = new Route({
   getParentRoute: () => rootRoute,
-  path: '/lazy-without-suspsense',
+  path: '/lazy-without-suspense',
   component: lazyRouteComponent(
     () =>
       new Promise<Record<string, SyncRouteComponent<any>>>((res) => {
         setTimeout(() => {
           res({
             default: () => <h1>Hello world from "lazy-without-suspense"</h1>,
           })
-        }, 1500)
+        }, 1000)
       }),
   ),
-  wrapInSuspense: false,
 })
 
 const lazyWithSuspense = new Route({
   getParentRoute: () => rootRoute,
-  path: '/lazy-with-suspsense',
+  path: '/lazy-with-suspense',
   component: lazyRouteComponent(
     () =>
       new Promise<Record<string, SyncRouteComponent<any>>>((res) => {
         setTimeout(() => {
+          console.log('res')
           res({
             default: () => <h1>Hello world from "lazy-with-suspense"</h1>,
           })
-        }, 1500)
+        }, 1000)
       }),
   ),
   pendingComponent: () => <h1>I'm loading</h1>,
@@ -98,11 +98,5 @@ declare module '@tanstack/router' {
 const rootElement = document.getElementById('app')!
 if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement)
-  root.render(
-    <StrictMode>
-      <Suspense>
-        <RouterProvider router={router} />
-      </Suspense>
-    </StrictMode>,
-  )
+  root.render(<RouterProvider router={router} />)
 }
diff --git a/packages/router/__tests__/createRoutes.test.ts b/packages/router/__tests__/createRoutes.test.ts
@@ -1,6 +1,12 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it } from 'vitest'
 import { z } from 'zod'
-import { createMemoryHistory, RootRoute, Route, Router, lazy } from '../src'
+import {
+  createMemoryHistory,
+  RootRoute,
+  Route,
+  Router,
+  lazyRouteComponent,
+} from '../src'
 
 // Write a test
 describe('everything', () => {
@@ -20,7 +26,10 @@ describe('everything', () => {
 
     const testRoute = new Route({
       getParentRoute: () => rootRoute,
-      component: lazy(() => import('./TestComponent'), 'NamedComponent'),
+      component: lazyRouteComponent(
+        () => import('./TestComponent'),
+        'NamedComponent',
+      ),
       path: 'test',
       validateSearch: (search) =>
         z

diff --git a/packages/router/src/router.ts b/packages/router/src/router.ts
@@ -431,7 +431,7 @@ export class Router<
         this.state.location.pathname,
         this.state.location.search,
         {
-          // throwOnError: true,
+          throwOnError: true,
         },
       )
 
@@ -781,20 +781,15 @@ export class Router<
 
             let latestPromise
 
-            const componentsPromise = (async () => {
-              // then run all component and data loaders in parallel
-              // For each component type, potentially load it asynchronously
+            const componentsPromise = Promise.all(
+              componentTypes.map(async (type) => {
+                const component = route.options[type]
 
-              await Promise.all(
-                componentTypes.map(async (type) => {
-                  const component = route.options[type]
-
-                  if (component?.preload) {
-                    await component.preload()
-                  }
-                }),
-              )
-            })()
+                if (component?.preload) {
+                  await component.preload()
+                }
+              }),
+            )
 
             const loaderPromise = Promise.resolve().then(() => {
               if (route.options.loader) {