@tanstack/react-router 1.52.4 → 1.52.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.52.4",
+  "version": "1.52.5",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/router.ts

@@ -1971,12 +1971,38 @@ export class Router<
               const existingMatch = this.getMatch(matchId)!
               const parentMatchId = matches[index - 1]?.id
 
+              const route = this.looseRoutesById[routeId]!
+
+              const pendingMs =
+                route.options.pendingMs ?? this.options.defaultPendingMs
+
+              const shouldPending = !!(
+                onReady &&
+                !this.isServer &&
+                !preload &&
+                (route.options.loader || route.options.beforeLoad) &&
+                typeof pendingMs === 'number' &&
+                pendingMs !== Infinity &&
+                (route.options.pendingComponent ??
+                  this.options.defaultPendingComponent)
+              )
+
               if (
                 // If we are in the middle of a load, either of these will be present
                 // (not to be confused with `loadPromise`, which is always defined)
                 existingMatch.beforeLoadPromise ||
                 existingMatch.loaderPromise
               ) {
+                if (shouldPending) {
+                  setTimeout(() => {
+                    try {
+                      // Update the match and prematurely resolve the loadMatches promise so that
+                      // the pending component can start rendering
+                      triggerOnReady()
+                    } catch {}
+                  }, pendingMs)
+                }
+
                 // Wait for the beforeLoad to resolve before we continue
                 await existingMatch.beforeLoadPromise
               } else {
@@ -1990,23 +2016,8 @@ export class Router<
                     beforeLoadPromise: createControlledPromise<void>(),
                   }))
 
-                  const route = this.looseRoutesById[routeId]!
                   const abortController = new AbortController()
 
-                  const pendingMs =
-                    route.options.pendingMs ?? this.options.defaultPendingMs
-
-                  const shouldPending = !!(
-                    onReady &&
-                    !this.isServer &&
-                    !preload &&
-                    (route.options.loader || route.options.beforeLoad) &&
-                    typeof pendingMs === 'number' &&
-                    pendingMs !== Infinity &&
-                    (route.options.pendingComponent ??
-                      this.options.defaultPendingComponent)
-                  )
-
                   let pendingTimeout: ReturnType<typeof setTimeout>
 
                   if (shouldPending) {