@tanstack/react-router 1.28.1 → 1.28.2

package/dist/esm/router.js

@@ -4,7 +4,7 @@ import invariant from "tiny-invariant";
 import warning from "tiny-warning";
 import { rootRouteId } from "./route.js";
 import { defaultStringifySearch, defaultParseSearch } from "./searchParams.js";
-import { replaceEqualDeep, pick, isServer, last, deepEqual, escapeJSON, functionalUpdate } from "./utils.js";
+import { createControlledPromise, replaceEqualDeep, pick, last, deepEqual, escapeJSON, functionalUpdate } from "./utils.js";
 import { getRouteMatch } from "./RouterProvider.js";
 import { trimPath, trimPathLeft, parsePathname, resolvePath, cleanPath, matchPathname, trimPathRight, interpolatePath, joinPaths } from "./path.js";
 import { isRedirect } from "./redirects.js";
@@ -31,6 +31,7 @@ class Router {
     this.latestLoadPromise = Promise.resolve();
     this.subscribers = /* @__PURE__ */ new Set();
     this.injectedHtml = [];
+    this.isServer = typeof document === "undefined";
     this.startReactTransition = (fn) => fn();
     this.update = (newOptions) => {
       if (newOptions.notFoundRoute) {
@@ -286,7 +287,7 @@ class Router {
       });
       const matches = [];
       matchedRoutes.forEach((route, index) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
         const parentMatch = matches[index - 1];
         const [preMatchSearch, searchError] = (() => {
           const parentSearch = (parentMatch == null ? void 0 : parentMatch.search) ?? locationSearch;
@@ -325,36 +326,55 @@ class Router {
         }) + loaderDepsHash;
         const existingMatch = getRouteMatch(this.state, matchId);
         const cause = this.state.matches.find((d) => d.id === matchId) ? "stay" : "enter";
-        const match = existingMatch ? {
-          ...existingMatch,
-          cause,
-          params: routeParams
-        } : {
-          id: matchId,
-          routeId: route.id,
-          params: routeParams,
-          pathname: joinPaths([this.basepath, interpolatedPath]),
-          updatedAt: Date.now(),
-          search: {},
-          searchError: void 0,
-          status: "pending",
-          showPending: false,
-          isFetching: false,
-          error: void 0,
-          paramsError: parseErrors[index],
-          loadPromise: Promise.resolve(),
-          routeContext: void 0,
-          context: void 0,
-          abortController: new AbortController(),
-          fetchCount: 0,
-          cause,
-          loaderDeps,
-          invalid: false,
-          preload: false,
-          links: (_d = (_c = route.options).links) == null ? void 0 : _d.call(_c),
-          scripts: (_f = (_e = route.options).scripts) == null ? void 0 : _f.call(_e),
-          staticData: route.options.staticData || {}
-        };
+        let match;
+        if (existingMatch) {
+          match = {
+            ...existingMatch,
+            cause,
+            params: routeParams
+          };
+        } else {
+          const status = route.options.loader || route.options.beforeLoad ? "pending" : "success";
+          const loadPromise = createControlledPromise();
+          if (status === "success") {
+            loadPromise.resolve();
+          }
+          match = {
+            id: matchId,
+            routeId: route.id,
+            params: routeParams,
+            pathname: joinPaths([this.basepath, interpolatedPath]),
+            updatedAt: Date.now(),
+            search: {},
+            searchError: void 0,
+            status: "pending",
+            isFetching: false,
+            error: void 0,
+            paramsError: parseErrors[index],
+            loaderPromise: Promise.resolve(),
+            loadPromise,
+            routeContext: void 0,
+            context: void 0,
+            abortController: new AbortController(),
+            fetchCount: 0,
+            cause,
+            loaderDeps,
+            invalid: false,
+            preload: false,
+            links: (_d = (_c = route.options).links) == null ? void 0 : _d.call(_c),
+            scripts: (_f = (_e = route.options).scripts) == null ? void 0 : _f.call(_e),
+            staticData: route.options.staticData || {}
+          };
+        }
+        if (match.status === "success") {
+          match.meta = (_h = (_g = route.options).meta) == null ? void 0 : _h.call(_g, {
+            params: match.params,
+            loaderData: match.loaderData
+          });
+          match.headers = (_j = (_i = route.options).headers) == null ? void 0 : _j.call(_i, {
+            loaderData: match.loaderData
+          });
+        }
         if (!(opts == null ? void 0 : opts.preload)) {
           match.globalNotFound = globalNotFoundRouteId === route.id;
         }
@@ -376,25 +396,20 @@ class Router {
     };
     this.buildLocation = (opts) => {
       const build = (dest = {}, matches) => {
-        var _a, _b, _c;
-        const relevantMatches = this.state.pendingMatches || this.state.matches;
-        const fromSearch = (
-          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-          ((_a = relevantMatches[relevantMatches.length - 1]) == null ? void 0 : _a.search) || this.latestLocation.search
-        );
-        const fromMatches = this.matchRoutes(
-          this.latestLocation.pathname,
-          fromSearch
-        );
+        var _a, _b, _c, _d;
+        const fromPath = dest.from || this.latestLocation.pathname;
+        let fromSearch = ((_a = dest._fromLocation) == null ? void 0 : _a.search) || this.latestLocation.search;
+        const fromMatches = this.matchRoutes(fromPath, fromSearch);
+        fromSearch = ((_b = last(fromMatches)) == null ? void 0 : _b.search) || this.latestLocation.search;
         const stayingMatches = matches == null ? void 0 : matches.filter(
           (d) => fromMatches.find((e) => e.routeId === d.routeId)
         );
-        const fromRoute = this.looseRoutesById[(_b = last(fromMatches)) == null ? void 0 : _b.routeId];
+        const fromRoute = this.looseRoutesById[(_c = last(fromMatches)) == null ? void 0 : _c.routeId];
         let pathname = dest.to ? this.resolvePathWithBase(
           dest.from ?? this.latestLocation.pathname,
           `${dest.to}`
         ) : this.resolvePathWithBase(fromRoute == null ? void 0 : fromRoute.fullPath, fromRoute == null ? void 0 : fromRoute.fullPath);
-        const prevParams = { ...(_c = last(fromMatches)) == null ? void 0 : _c.params };
+        const prevParams = { ...(_d = last(fromMatches)) == null ? void 0 : _d.params };
         let nextParams = (dest.params ?? true) === true ? prevParams : { ...prevParams, ...functionalUpdate(dest.params, prevParams) };
         if (Object.keys(nextParams).length > 0) {
           matches == null ? void 0 : matches.map((d) => this.looseRoutesById[d.routeId].options.stringifyParams).filter(Boolean).forEach((fn) => {
@@ -561,275 +576,302 @@ class Router {
       matches,
       preload
     }) => {
-      var _a, _b;
       let latestPromise;
       let firstBadMatchIndex;
-      const updateMatch = (match, opts) => {
-        var _a2;
-        const isPending = (_a2 = this.state.pendingMatches) == null ? void 0 : _a2.find(
-          (d) => d.id === match.id
-        );
-        const isMatched = this.state.matches.find((d) => d.id === match.id);
+      const updateMatch = (id, updater, opts) => {
+        var _a;
+        let updated;
+        const isPending = (_a = this.state.pendingMatches) == null ? void 0 : _a.find((d) => d.id === id);
+        const isMatched = this.state.matches.find((d) => d.id === id);
         const matchesKey = isPending ? "pendingMatches" : isMatched ? "matches" : "cachedMatches";
         this.__store.setState((s) => {
-          var _a3, _b2;
+          var _a2, _b;
           return {
             ...s,
-            [matchesKey]: (opts == null ? void 0 : opts.remove) ? (_a3 = s[matchesKey]) == null ? void 0 : _a3.filter((d) => d.id !== match.id) : (_b2 = s[matchesKey]) == null ? void 0 : _b2.map((d) => d.id === match.id ? match : d)
+            [matchesKey]: (opts == null ? void 0 : opts.remove) ? (_a2 = s[matchesKey]) == null ? void 0 : _a2.filter((d) => d.id !== id) : (_b = s[matchesKey]) == null ? void 0 : _b.map(
+              (d) => d.id === id ? updated = updater(d) : d
+            )
           };
         });
+        return updated;
       };
       const handleMatchSpecialError = (match, err) => {
-        match = {
-          ...match,
+        updateMatch(match.id, (prev) => ({
+          ...prev,
           status: isRedirect(err) ? "redirected" : isNotFound(err) ? "notFound" : "error",
           isFetching: false,
           error: err
-        };
-        updateMatch(match);
+        }));
         if (!err.routeId) {
           err.routeId = match.routeId;
         }
         throw err;
       };
-      for (let [index, match] of matches.entries()) {
-        const parentMatch = matches[index - 1];
-        const route = this.looseRoutesById[match.routeId];
-        const abortController = new AbortController();
-        const handleSerialError = (err, code) => {
-          var _a2, _b2;
-          err.routerCode = code;
-          firstBadMatchIndex = firstBadMatchIndex ?? index;
-          if (isRedirect(err) || isNotFound(err)) {
-            handleMatchSpecialError(match, err);
-          }
-          try {
-            (_b2 = (_a2 = route.options).onError) == null ? void 0 : _b2.call(_a2, err);
-          } catch (errorHandlerErr) {
-            err = errorHandlerErr;
-            if (isRedirect(err) || isNotFound(err)) {
-              handleMatchSpecialError(match, errorHandlerErr);
-            }
-          }
-          matches[index] = match = {
-            ...match,
-            error: err,
-            status: "error",
-            updatedAt: Date.now(),
-            abortController: new AbortController()
-          };
-        };
-        if (match.paramsError) {
-          handleSerialError(match.paramsError, "PARSE_PARAMS");
-        }
-        if (match.searchError) {
-          handleSerialError(match.searchError, "VALIDATE_SEARCH");
-        }
-        try {
-          const parentContext = (parentMatch == null ? void 0 : parentMatch.context) ?? this.options.context ?? {};
-          const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
-          const pendingPromise = typeof pendingMs === "number" && pendingMs <= 0 ? Promise.resolve() : new Promise((r) => setTimeout(r, pendingMs));
-          const beforeLoadContext = await ((_b = (_a = route.options).beforeLoad) == null ? void 0 : _b.call(_a, {
-            search: match.search,
-            abortController,
-            params: match.params,
-            preload: !!preload,
-            context: parentContext,
-            location,
-            navigate: (opts) => this.navigate({ ...opts, from: match.pathname }),
-            buildLocation: this.buildLocation,
-            cause: preload ? "preload" : match.cause
-          })) ?? {};
-          if (isRedirect(beforeLoadContext) || isNotFound(beforeLoadContext)) {
-            handleSerialError(beforeLoadContext, "BEFORE_LOAD");
-          }
-          const context = {
-            ...parentContext,
-            ...beforeLoadContext
-          };
-          matches[index] = match = {
-            ...match,
-            routeContext: replaceEqualDeep(match.routeContext, beforeLoadContext),
-            context: replaceEqualDeep(match.context, context),
-            abortController,
-            pendingPromise
-          };
-        } catch (err) {
-          handleSerialError(err, "BEFORE_LOAD");
-          break;
-        }
-      }
-      const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
-      const matchPromises = [];
-      validResolvedMatches.forEach((match, index) => {
-        matchPromises.push(
-          // eslint-disable-next-line no-async-promise-executor
-          new Promise(async (resolve, reject) => {
-            var _a2;
-            const parentMatchPromise = matchPromises[index - 1];
-            const route = this.looseRoutesById[match.routeId];
-            const handleError = (err) => {
-              if (isRedirect(err) || isNotFound(err)) {
-                handleMatchSpecialError(match, err);
-              }
-            };
-            let loadPromise;
-            matches[index] = match = {
-              ...match,
-              showPending: false
-            };
-            let didShowPending = false;
-            const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
-            const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
-            const loaderContext = {
-              params: match.params,
-              deps: match.loaderDeps,
-              preload: !!preload,
-              parentMatchPromise,
-              abortController: match.abortController,
-              context: match.context,
-              location,
-              navigate: (opts) => this.navigate({ ...opts, from: match.pathname }),
-              cause: preload ? "preload" : match.cause,
-              route
-            };
-            const fetch = async () => {
-              var _a3, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
-              try {
-                if (match.isFetching) {
-                  loadPromise = (_a3 = getRouteMatch(this.state, match.id)) == null ? void 0 : _a3.loadPromise;
-                } else {
+      try {
+        await new Promise((resolveAll, rejectAll) => {
+          ;
+          (async () => {
+            var _a, _b;
+            try {
+              for (let [index, match] of matches.entries()) {
+                const parentMatch = matches[index - 1];
+                const route = this.looseRoutesById[match.routeId];
+                const abortController = new AbortController();
+                const handleSerialError = (err, code) => {
+                  var _a2, _b2;
+                  err.routerCode = code;
+                  firstBadMatchIndex = firstBadMatchIndex ?? index;
+                  if (isRedirect(err) || isNotFound(err)) {
+                    handleMatchSpecialError(match, err);
+                  }
+                  try {
+                    (_b2 = (_a2 = route.options).onError) == null ? void 0 : _b2.call(_a2, err);
+                  } catch (errorHandlerErr) {
+                    err = errorHandlerErr;
+                    if (isRedirect(err) || isNotFound(err)) {
+                      handleMatchSpecialError(match, errorHandlerErr);
+                    }
+                  }
                   matches[index] = match = {
                     ...match,
-                    isFetching: true,
-                    fetchCount: match.fetchCount + 1
+                    error: err,
+                    status: "error",
+                    updatedAt: Date.now(),
+                    abortController: new AbortController()
                   };
-                  const lazyPromise = ((_b2 = route.lazyFn) == null ? void 0 : _b2.call(route).then((lazyRoute) => {
-                    Object.assign(route.options, lazyRoute.options);
-                  })) || Promise.resolve();
-                  const componentsPromise = lazyPromise.then(
-                    () => Promise.all(
-                      componentTypes.map(async (type) => {
-                        const component = route.options[type];
-                        if (component == null ? void 0 : component.preload) {
-                          await component.preload();
-                        }
-                      })
-                    )
-                  );
-                  const loaderPromise = (_d = (_c = route.options).loader) == null ? void 0 : _d.call(_c, loaderContext);
-                  loadPromise = Promise.all([
-                    componentsPromise,
-                    loaderPromise,
-                    lazyPromise
-                  ]).then((d) => d[1]);
-                }
-                matches[index] = match = {
-                  ...match,
-                  loadPromise
                 };
-                updateMatch(match);
-                const loaderData = await loadPromise;
-                if (latestPromise = checkLatest())
-                  return await latestPromise;
-                handleError(loaderData);
-                if (didShowPending && pendingMinMs) {
-                  await new Promise((r) => setTimeout(r, pendingMinMs));
+                if (match.paramsError) {
+                  handleSerialError(match.paramsError, "PARSE_PARAMS");
                 }
-                if (latestPromise = checkLatest())
-                  return await latestPromise;
-                const [meta, headers] = await Promise.all([
-                  (_f = (_e = route.options).meta) == null ? void 0 : _f.call(_e, {
-                    params: match.params,
-                    loaderData
-                  }),
-                  (_h = (_g = route.options).headers) == null ? void 0 : _h.call(_g, {
-                    loaderData
-                  })
-                ]);
-                matches[index] = match = {
-                  ...match,
-                  error: void 0,
-                  status: "success",
-                  isFetching: false,
-                  updatedAt: Date.now(),
-                  loaderData,
-                  loadPromise: void 0,
-                  meta,
-                  headers
-                };
-              } catch (e) {
-                let error = e;
-                if (latestPromise = checkLatest())
-                  return await latestPromise;
-                handleError(e);
-                try {
-                  (_j = (_i = route.options).onError) == null ? void 0 : _j.call(_i, e);
-                } catch (onErrorError) {
-                  error = onErrorError;
-                  handleError(onErrorError);
+                if (match.searchError) {
+                  handleSerialError(match.searchError, "VALIDATE_SEARCH");
                 }
-                matches[index] = match = {
-                  ...match,
-                  error,
-                  status: "error",
-                  isFetching: false
-                };
-              }
-              updateMatch(match);
-            };
-            const age = Date.now() - match.updatedAt;
-            const staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 3e4 : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
-            const shouldReloadOption = route.options.shouldReload;
-            const shouldReload = typeof shouldReloadOption === "function" ? shouldReloadOption(loaderContext) : shouldReloadOption;
-            matches[index] = match = {
-              ...match,
-              preload: !!preload && !this.state.matches.find((d) => d.id === match.id)
-            };
-            if (match.status === "success" && (match.invalid || (shouldReload ?? age > staleAge))) {
-              (async () => {
                 try {
-                  await fetch();
-                } catch (err) {
-                  console.info("Background Fetching Error", err);
-                  if (isRedirect(err)) {
-                    (this.state.pendingMatches || this.state.matches).find((d) => d.id === match.id);
-                    handleError(err);
-                    invariant(
-                      false,
-                      "You need to redirect from a background fetch? This is not supported yet. File an issue."
-                    );
-                  }
-                }
-              })();
-              return resolve();
-            }
-            const shouldPending = !preload && route.options.loader && typeof pendingMs === "number" && (route.options.pendingComponent ?? this.options.defaultPendingComponent);
-            if (match.status !== "success") {
-              try {
-                if (shouldPending) {
-                  (_a2 = match.pendingPromise) == null ? void 0 : _a2.then(async () => {
-                    if (latestPromise = checkLatest())
-                      return latestPromise;
-                    didShowPending = true;
-                    matches[index] = match = {
-                      ...match,
-                      showPending: true
-                    };
-                    updateMatch(match);
-                    resolve();
+                  const parentContext = (parentMatch == null ? void 0 : parentMatch.context) ?? this.options.context ?? {};
+                  const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
+                  const pendingPromise = typeof pendingMs !== "number" || pendingMs <= 0 ? Promise.resolve() : new Promise((r) => {
+                    if (pendingMs !== Infinity)
+                      setTimeout(r, pendingMs);
                   });
+                  const shouldPending = !this.isServer && !preload && (route.options.loader || route.options.beforeLoad) && typeof pendingMs === "number" && (route.options.pendingComponent ?? this.options.defaultPendingComponent);
+                  if (shouldPending) {
+                    pendingPromise.then(async () => {
+                      if (latestPromise = checkLatest())
+                        return latestPromise;
+                      resolveAll();
+                    });
+                  }
+                  const beforeLoadContext = await ((_b = (_a = route.options).beforeLoad) == null ? void 0 : _b.call(_a, {
+                    search: match.search,
+                    abortController,
+                    params: match.params,
+                    preload: !!preload,
+                    context: parentContext,
+                    location,
+                    navigate: (opts) => this.navigate({ ...opts, from: match.pathname }),
+                    buildLocation: this.buildLocation,
+                    cause: preload ? "preload" : match.cause
+                  })) ?? {};
+                  if (isRedirect(beforeLoadContext) || isNotFound(beforeLoadContext)) {
+                    handleSerialError(beforeLoadContext, "BEFORE_LOAD");
+                  }
+                  const context = {
+                    ...parentContext,
+                    ...beforeLoadContext
+                  };
+                  matches[index] = match = {
+                    ...match,
+                    routeContext: replaceEqualDeep(
+                      match.routeContext,
+                      beforeLoadContext
+                    ),
+                    context: replaceEqualDeep(match.context, context),
+                    abortController
+                  };
+                } catch (err) {
+                  handleSerialError(err, "BEFORE_LOAD");
+                  break;
                 }
-                await fetch();
-              } catch (err) {
-                reject(err);
               }
+              const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
+              const matchPromises = [];
+              await Promise.all(
+                validResolvedMatches.map(async (match, index) => {
+                  const parentMatchPromise = matchPromises[index - 1];
+                  const route = this.looseRoutesById[match.routeId];
+                  const handleError = (err) => {
+                    if (isRedirect(err) || isNotFound(err)) {
+                      handleMatchSpecialError(match, err);
+                    }
+                  };
+                  const loaderContext = {
+                    params: match.params,
+                    deps: match.loaderDeps,
+                    preload: !!preload,
+                    parentMatchPromise,
+                    abortController: match.abortController,
+                    context: match.context,
+                    location,
+                    navigate: (opts) => this.navigate({ ...opts, from: match.pathname }),
+                    cause: preload ? "preload" : match.cause,
+                    route
+                  };
+                  const fetch = async () => {
+                    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i;
+                    const existing = getRouteMatch(this.state, match.id);
+                    let lazyPromise = Promise.resolve();
+                    let componentsPromise = Promise.resolve();
+                    let loaderPromise = existing.loaderPromise;
+                    let loadPromise = existing.loadPromise;
+                    const potentialPendingMinPromise = async () => {
+                      const latestMatch = getRouteMatch(this.state, match.id);
+                      if (latestMatch == null ? void 0 : latestMatch.minPendingPromise) {
+                        await latestMatch.minPendingPromise;
+                        if (latestPromise = checkLatest())
+                          return await latestPromise;
+                        updateMatch(latestMatch.id, (prev) => ({
+                          ...prev,
+                          minPendingPromise: void 0
+                        }));
+                      }
+                    };
+                    try {
+                      if (!match.isFetching) {
+                        matches[index] = match = {
+                          ...match,
+                          isFetching: true,
+                          fetchCount: match.fetchCount + 1
+                        };
+                        lazyPromise = ((_a2 = route.lazyFn) == null ? void 0 : _a2.call(route).then((lazyRoute) => {
+                          Object.assign(route.options, lazyRoute.options);
+                        })) || Promise.resolve();
+                        componentsPromise = lazyPromise.then(
+                          () => Promise.all(
+                            componentTypes.map(async (type) => {
+                              const component = route.options[type];
+                              if (component == null ? void 0 : component.preload) {
+                                await component.preload();
+                              }
+                            })
+                          )
+                        );
+                        await lazyPromise;
+                        if (latestPromise = checkLatest())
+                          return await latestPromise;
+                        loaderPromise = (_c = (_b2 = route.options).loader) == null ? void 0 : _c.call(_b2, loaderContext);
+                        const previousResolve = loadPromise.resolve;
+                        loadPromise = createControlledPromise(
+                          // Resolve the old when we we resolve the new one
+                          previousResolve
+                        );
+                      }
+                      matches[index] = match = updateMatch(match.id, (prev) => ({
+                        ...prev,
+                        loaderPromise,
+                        loadPromise
+                      }));
+                      const loaderData = await loaderPromise;
+                      if (latestPromise = checkLatest())
+                        return await latestPromise;
+                      handleError(loaderData);
+                      if (latestPromise = checkLatest())
+                        return await latestPromise;
+                      await potentialPendingMinPromise();
+                      if (latestPromise = checkLatest())
+                        return await latestPromise;
+                      const meta = (_e = (_d = route.options).meta) == null ? void 0 : _e.call(_d, {
+                        params: match.params,
+                        loaderData
+                      });
+                      const headers = (_g = (_f = route.options).headers) == null ? void 0 : _g.call(_f, {
+                        loaderData
+                      });
+                      matches[index] = match = updateMatch(match.id, (prev) => ({
+                        ...prev,
+                        error: void 0,
+                        status: "success",
+                        isFetching: false,
+                        updatedAt: Date.now(),
+                        loaderData,
+                        meta,
+                        headers
+                      }));
+                    } catch (e) {
+                      let error = e;
+                      if (latestPromise = checkLatest())
+                        return await latestPromise;
+                      await potentialPendingMinPromise();
+                      if (latestPromise = checkLatest())
+                        return await latestPromise;
+                      handleError(e);
+                      try {
+                        (_i = (_h = route.options).onError) == null ? void 0 : _i.call(_h, e);
+                      } catch (onErrorError) {
+                        error = onErrorError;
+                        handleError(onErrorError);
+                      }
+                      matches[index] = match = updateMatch(match.id, (prev) => ({
+                        ...prev,
+                        error,
+                        status: "error",
+                        isFetching: false
+                      }));
+                    }
+                    await componentsPromise;
+                    if (latestPromise = checkLatest())
+                      return await latestPromise;
+                    loadPromise.resolve();
+                  };
+                  const age = Date.now() - match.updatedAt;
+                  const staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 3e4 : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
+                  const shouldReloadOption = route.options.shouldReload;
+                  const shouldReload = typeof shouldReloadOption === "function" ? shouldReloadOption(loaderContext) : shouldReloadOption;
+                  matches[index] = match = {
+                    ...match,
+                    preload: !!preload && !this.state.matches.find((d) => d.id === match.id)
+                  };
+                  const fetchWithRedirect = async () => {
+                    try {
+                      await fetch();
+                    } catch (err) {
+                      if (latestPromise = checkLatest())
+                        return await latestPromise;
+                      if (isRedirect(err)) {
+                        const redirect = this.resolveRedirect(err);
+                        if (!preload && !this.isServer) {
+                          this.navigate({ ...redirect, replace: true });
+                        }
+                        throw redirect;
+                      } else if (isNotFound(err)) {
+                        if (!preload)
+                          this.handleNotFound(matches, err);
+                        throw err;
+                      }
+                      handleError(err);
+                    }
+                  };
+                  if (match.status === "success" && (match.invalid || (shouldReload ?? age > staleAge))) {
+                    fetchWithRedirect();
+                    return;
+                  }
+                  if (match.status !== "success") {
+                    await fetchWithRedirect();
+                  }
+                })
+              );
+              if (latestPromise = checkLatest())
+                return await latestPromise;
+              resolveAll();
+            } catch (err) {
+              rejectAll(err);
             }
-            resolve();
-          })
-        );
-      });
-      await Promise.all(matchPromises);
+          })();
+        });
+      } catch (err) {
+        if (isRedirect(err) || isNotFound(err)) {
+          throw err;
+        }
+      }
       return matches;
     };
     this.invalidate = () => {
@@ -850,53 +892,57 @@ class Router {
       return this.load();
     };
     this.load = async () => {
-      const promise = new Promise(async (resolve, reject) => {
-        const next = this.latestLocation;
-        const prevLocation = this.state.resolvedLocation;
-        const pathDidChange = prevLocation.href !== next.href;
-        let latestPromise;
-        this.cancelMatches();
-        this.emit({
-          type: "onBeforeLoad",
-          fromLocation: prevLocation,
-          toLocation: next,
-          pathChanged: pathDidChange
-        });
-        let pendingMatches;
-        const previousMatches = this.state.matches;
-        this.__store.batch(() => {
-          this.cleanCache();
-          pendingMatches = this.matchRoutes(next.pathname, next.search, {
-            debug: true
-          });
-          this.__store.setState((s) => ({
-            ...s,
-            isLoading: true,
-            location: next,
-            pendingMatches,
-            cachedMatches: s.cachedMatches.filter((d) => {
-              return !pendingMatches.find((e) => e.id === d.id);
-            })
-          }));
-        });
+      let resolveLoad;
+      let rejectLoad;
+      const promise = new Promise((resolve, reject) => {
+        resolveLoad = resolve;
+        rejectLoad = reject;
+      });
+      this.latestLoadPromise = promise;
+      let latestPromise;
+      (async () => {
         try {
+          const next = this.latestLocation;
+          const prevLocation = this.state.resolvedLocation;
+          const pathDidChange = prevLocation.href !== next.href;
+          this.cancelMatches();
+          this.emit({
+            type: "onBeforeLoad",
+            fromLocation: prevLocation,
+            toLocation: next,
+            pathChanged: pathDidChange
+          });
+          let pendingMatches;
+          const previousMatches = this.state.matches;
+          this.__store.batch(() => {
+            this.cleanCache();
+            pendingMatches = this.matchRoutes(next.pathname, next.search);
+            this.__store.setState((s) => ({
+              ...s,
+              isLoading: true,
+              location: next,
+              pendingMatches,
+              cachedMatches: s.cachedMatches.filter((d) => {
+                return !pendingMatches.find((e) => e.id === d.id);
+              })
+            }));
+          });
           let redirect;
           let notFound;
           try {
-            await this.loadMatches({
+            const loadMatchesPromise = this.loadMatches({
               matches: pendingMatches,
               location: next,
               checkLatest: () => this.checkLatest(promise)
             });
+            if (previousMatches.length || this.isServer) {
+              await loadMatchesPromise;
+            }
           } catch (err) {
             if (isRedirect(err)) {
-              redirect = this.resolveRedirect(err);
-              if (!isServer) {
-                this.navigate({ ...redirect, replace: true });
-              }
+              redirect = err;
             } else if (isNotFound(err)) {
               notFound = err;
-              this.handleNotFound(pendingMatches, err);
             }
           }
           if (latestPromise = this.checkLatest(promise)) {
@@ -942,16 +988,15 @@ class Router {
             toLocation: next,
             pathChanged: pathDidChange
           });
-          resolve();
+          resolveLoad();
         } catch (err) {
           if (latestPromise = this.checkLatest(promise)) {
             return latestPromise;
           }
-          console.log("Load Error", err);
-          reject(err);
+          console.error("Load Error", err);
+          rejectLoad(err);
         }
-      });
-      this.latestLoadPromise = promise;
+      })();
       return this.latestLoadPromise;
     };
     this.resolveRedirect = (err) => {
@@ -1015,7 +1060,11 @@ class Router {
         return matches;
       } catch (err) {
         if (isRedirect(err)) {
-          return await this.preloadRoute(err);
+          return await this.preloadRoute({
+            _fromDest: next,
+            from: next.pathname,
+            ...err
+          });
         }
         console.error(err);
         return void 0;
@@ -1156,8 +1205,7 @@ class Router {
       this.__store.setState((s) => {
         return {
           ...s,
-          matches,
-          lastUpdated: Date.now()
+          matches
         };
       });
     };
@@ -1232,7 +1280,6 @@ function getInitialRouterState(location) {
     matches: [],
     pendingMatches: [],
     cachedMatches: [],
-    lastUpdated: 0,
     statusCode: 200
   };
 }