fix: pending component handling for initial load (#4044)

Author: schiller-manuel

packages/router-core/src/router.ts

@@ -2274,10 +2274,6 @@ export class RouterCore<
       return !!(allPreload && !this.state.matches.find((d) => d.id === matchId))
     }
 
-    if (!this.isServer && !this.state.matches.length) {
-      triggerOnReady()
-    }
-
     const handleRedirectAndNotFound = (match: AnyRouteMatch, err: any) => {
       if (isResolvedRedirect(err)) {
         if (!err.reloadDocument) {
@@ -2383,7 +2379,9 @@ export class RouterCore<
                 onReady &&
                 !this.isServer &&
                 !resolvePreload(matchId) &&
-                (route.options.loader || route.options.beforeLoad) &&
+                (route.options.loader ||
+                  route.options.beforeLoad ||
+                  routeNeedsPreload(route)) &&
                 typeof pendingMs === 'number' &&
                 pendingMs !== Infinity &&
                 (route.options.pendingComponent ??
@@ -2668,6 +2666,10 @@ export class RouterCore<
                             loaderData,
                           })
 
+                          // Last but not least, wait for the the components
+                          // to be preloaded before we resolve the match
+                          await route._componentsPromise
+
                           updateMatch(matchId, (prev) => ({
                             ...prev,
                             error: undefined,
@@ -2710,10 +2712,6 @@ export class RouterCore<
                           router: this,
                           match: this.getMatch(matchId)!,
                         })
-
-                        // Last but not least, wait for the the components
-                        // to be preloaded before we resolve the match
-                        await route._componentsPromise
                       } catch (err) {
                         updateMatch(matchId, (prev) => ({
                           ...prev,

packages/solid-router/src/Transitioner.tsx

@@ -31,9 +31,9 @@ export function Transitioner() {
   const previousIsPagePending = usePrevious(isPagePending)
 
   if (!router.isServer) {
-    router.startTransition = (fn: () => void) => {
+    router.startTransition = async (fn: () => void | Promise<void>) => {
       setIsTransitioning(true)
-      fn()
+      await fn()
       setIsTransitioning(false)
     }
   }