@tanstack/react-router 0.0.1-beta.227 → 0.0.1-beta.229

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-router",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.227",
+  "version": "0.0.1-beta.229",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router",
@@ -42,7 +42,7 @@
     "@babel/runtime": "^7.16.7",
     "tiny-invariant": "^1.3.1",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "0.0.1-beta.227"
+    "@tanstack/history": "0.0.1-beta.229"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/Matches.tsx

@@ -26,6 +26,7 @@ export interface RouteMatch<
   params: RouteById<TRouteTree, TRouteId>['types']['allParams']
   status: 'pending' | 'success' | 'error'
   isFetching: boolean
+  showPending: boolean
   invalid: boolean
   error: unknown
   paramsError: unknown
@@ -98,13 +99,22 @@ export function Match({ matches }: { matches: RouteMatch[] }) {
   const PendingComponent = (route.options.pendingComponent ??
     options.defaultPendingComponent) as any
 
+  const pendingElement = PendingComponent
+    ? React.createElement(PendingComponent, {
+        useMatch: route.useMatch,
+        useRouteContext: route.useRouteContext,
+        useSearch: route.useSearch,
+        useParams: route.useParams,
+      })
+    : undefined
+
   const routeErrorComponent =
     route.options.errorComponent ??
     options.defaultErrorComponent ??
     ErrorComponent
 
   const ResolvedSuspenseBoundary =
-    route.options.wrapInSuspense ?? PendingComponent
+    route.options.wrapInSuspense ?? pendingElement
       ? React.Suspense
       : SafeFragment
 
@@ -127,14 +137,7 @@ export function Match({ matches }: { matches: RouteMatch[] }) {
 
   return (
     <matchesContext.Provider value={matches}>
-      <ResolvedSuspenseBoundary
-        fallback={React.createElement(PendingComponent, {
-          useMatch: route.useMatch,
-          useRouteContext: route.useRouteContext,
-          useSearch: route.useSearch,
-          useParams: route.useParams,
-        })}
-      >
+      <ResolvedSuspenseBoundary fallback={pendingElement}>
         <ResolvedCatchBoundary
           resetKey={locationKey}
           errorComponent={errorComponent}
@@ -142,25 +145,30 @@ export function Match({ matches }: { matches: RouteMatch[] }) {
             warning(false, `Error in route match: ${match.id}`)
           }}
         >
-          <MatchInner match={match} />
+          <MatchInner match={match} pendingElement={pendingElement} />
         </ResolvedCatchBoundary>
       </ResolvedSuspenseBoundary>
     </matchesContext.Provider>
   )
 }
-function MatchInner({ match }: { match: RouteMatch }): any {
+function MatchInner({
+  match,
+  pendingElement,
+}: {
+  match: RouteMatch
+  pendingElement: any
+}): any {
   const { options, routesById } = useRouter()
   const route = routesById[match.routeId]!
 
-  if (match.id.split('/').length === 4) {
-    console.log(match.id, pick(match, ['status', 'cause', 'isFetching']))
-  }
-
   if (match.status === 'error') {
     throw match.error
   }
 
   if (match.status === 'pending') {
+    if (match.showPending) {
+      return pendingElement || null
+    }
     throw match.loadPromise
   }
 

package/src/route.ts

@@ -202,9 +202,7 @@ export type UpdatableRouteOptions<
   errorComponent?: ErrorRouteComponent<
     TFullSearchSchema,
     TAllParams,
-    {}
-    // TAllContext // TODO: I have no idea why this breaks the universe,
-    // so we'll come back to it later.
+    TAllContext // NOTE: This used to break the universe.... but it seems to work now?
   > //
   // If supported by your framework, the content to be rendered as the fallback content until the route is ready to render
   pendingComponent?: PendingRouteComponent<
@@ -212,6 +210,8 @@ export type UpdatableRouteOptions<
     TAllParams,
     TAllContext
   >
+  pendingMs?: number
+  pendingMinMs?: number
   // Filter functions that can manipulate search params *before* they are passed to links and navigate
   // calls that match this route.
   preSearchFilters?: SearchFilter<TFullSearchSchema>[]

package/src/router.ts

@@ -119,13 +119,11 @@ export interface RouterOptions<
     AnyPathParams,
     AnyContext
   >
-  defaultMaxAge?: number
-  defaultGcMaxAge?: number
-  defaultPreloadMaxAge?: number
+  defaultPendingMs?: number
+  defaultPendingMinMs?: number
   caseSensitive?: boolean
   routeTree?: TRouteTree
   basepath?: string
-  createRoute?: (opts: { route: AnyRoute; router: AnyRouter }) => void
   context?: TRouteTree['types']['routerContext']
   // dehydrate?: () => TDehydrated
   // hydrate?: (dehydrated: TDehydrated) => void
@@ -253,6 +251,8 @@ export class Router<
   constructor(options: RouterConstructorOptions<TRouteTree, TDehydrated>) {
     this.updateOptions({
       defaultPreloadDelay: 50,
+      defaultPendingMs: 1000,
+      defaultPendingMinMs: 500,
       context: undefined!,
       ...options,
       stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
@@ -631,6 +631,7 @@ export class Router<
             search: {} as any,
             searchError: undefined,
             status: hasLoaders ? 'pending' : 'success',
+            showPending: false,
             isFetching: false,
             invalid: false,
             error: undefined,
@@ -1061,8 +1062,11 @@ export class Router<
             ...match,
             fetchedAt: Date.now(),
             invalid: false,
+            showPending: false,
           }
 
+          const pendingPromise = new Promise((r) => setTimeout(r, 1000))
+
           if (match.isFetching) {
             loadPromise = getRouteMatch(this.state, match.id)?.loadPromise
           } else {
@@ -1146,45 +1150,83 @@ export class Router<
             }))
           }
 
-          try {
-            const loaderData = await loadPromise
-            if ((latestPromise = checkLatest())) return await latestPromise
-
-            matches[index] = match = {
-              ...match,
-              error: undefined,
-              status: 'success',
-              isFetching: false,
-              updatedAt: Date.now(),
-              loaderData,
-              loadPromise: undefined,
+          let didShowPending = false
+
+          await new Promise<void>(async (resolve) => {
+            // If the route has a pending component and a pendingMs option,
+            // forcefully show the pending component
+            if (
+              !preload &&
+              (route.options.pendingComponent ??
+                this.options.defaultPendingComponent) &&
+              (route.options.pendingMs ?? this.options.defaultPendingMs)
+            ) {
+              pendingPromise.then(() => {
+                didShowPending = true
+                matches[index] = match = {
+                  ...match,
+                  showPending: true,
+                }
+
+                this.setState((s) => ({
+                  ...s,
+                  matches: s.matches.map((d) =>
+                    d.id === match.id ? match : d,
+                  ),
+                }))
+                resolve()
+              })
             }
-          } catch (error) {
-            if ((latestPromise = checkLatest())) return await latestPromise
-            if (handleIfRedirect(error)) return
 
             try {
-              route.options.onError?.(error)
-            } catch (onErrorError) {
-              error = onErrorError
-              if (handleIfRedirect(onErrorError)) return
+              const loaderData = await loadPromise
+              if ((latestPromise = checkLatest())) return await latestPromise
+
+              const pendingMinMs =
+                route.options.pendingMinMs ?? this.options.defaultPendingMinMs
+
+              if (didShowPending && pendingMinMs) {
+                await new Promise((r) => setTimeout(r, pendingMinMs))
+              }
+
+              matches[index] = match = {
+                ...match,
+                error: undefined,
+                status: 'success',
+                isFetching: false,
+                updatedAt: Date.now(),
+                loaderData,
+                loadPromise: undefined,
+              }
+            } catch (error) {
+              if ((latestPromise = checkLatest())) return await latestPromise
+              if (handleIfRedirect(error)) return
+
+              try {
+                route.options.onError?.(error)
+              } catch (onErrorError) {
+                error = onErrorError
+                if (handleIfRedirect(onErrorError)) return
+              }
+
+              matches[index] = match = {
+                ...match,
+                error,
+                status: 'error',
+                isFetching: false,
+                updatedAt: Date.now(),
+              }
             }
 
-            matches[index] = match = {
-              ...match,
-              error,
-              status: 'error',
-              isFetching: false,
-              updatedAt: Date.now(),
+            if (!preload) {
+              this.setState((s) => ({
+                ...s,
+                matches: s.matches.map((d) => (d.id === match.id ? match : d)),
+              }))
             }
-          }
 
-          if (!preload) {
-            this.setState((s) => ({
-              ...s,
-              matches: s.matches.map((d) => (d.id === match.id ? match : d)),
-            }))
-          }
+            resolve()
+          })
         })(),
       )
     })