wait for all loaders before navigation

Author: wmertens

e2e/qwik-e2e/tests/qwikrouter/loaders.e2e.ts

@@ -52,10 +52,6 @@ test.describe('loaders', () => {
       await expect(title).toHaveText('Loaders - Qwik', { useInnerText: true });
       await expect(date).toHaveText('date: 2021-01-01T00:00:00.000Z');
       await expect(slow).toHaveText('slow: 123');
-      // SPA navigation shows stale values first, then updates asynchronously via re-fetch
-      if (javaScriptEnabled) {
-        await expect(nestedName).toHaveText('name: Manuel');
-      }
       await expect(nestedName).toHaveText('name: stuff');
       await expect(nestedDate).toHaveText('date: 2021-01-01T00:00:00.000Z');
       await expect(nestedDep).toHaveText('dep: 84');

packages/qwik-router/src/runtime/src/qwik-router-component.tsx

@@ -124,7 +124,7 @@ const preventNav: {
 
 // Track navigations during prevent so we don't overwrite
 // We need to use an object so we can write into it from qrls
-const internalState = { navCount: 0 };
+const internalState = { navCount: 0, redirectCount: 0 };
 
 /**
  * @public
@@ -512,7 +512,25 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
       const contentModules = $mods$ as ContentModule[];
       // Update the loader context for the new route (triggers track subscriptions)
       updateRouteLoaderCtx(routeLoaderCtx, loadedRoute.$loaderPaths$, trackUrl);
-      ensureRouteLoaderSignals(contentModules, loaderState, routeLoaderCtx);
+      const routeLoaders = ensureRouteLoaderSignals(contentModules, loaderState, routeLoaderCtx);
+      // Await all loader signals — promise() triggers $computeIfNeeded$ for
+      // INVALID signals (from store change or newly created) and waits for completion
+      const navCountBefore = internalState.navCount;
+      if (!isServer && routeLoaders.length > 0) {
+        await Promise.all(routeLoaders.map((loader) => loaderState[loader.__id]?.promise()));
+      }
+
+      // If a loader triggered a redirect via goto() during computation,
+      // navCount will have changed. Bail so the redirect navigation takes over.
+      if (internalState.navCount !== navCountBefore) {
+        if (++internalState.redirectCount > 20) {
+          console.error('Too many redirects, aborting navigation');
+          internalState.redirectCount = 0;
+          return;
+        }
+        return;
+      }
+      internalState.redirectCount = 0;
 
       // Update httpStatus for 404/error pages
       if ($notFound$) {