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

package/build/types/Matches.d.ts

@@ -11,6 +11,7 @@ export interface RouteMatch<TRouteTree extends AnyRoute = AnyRoute, TRouteId ext
     params: RouteById<TRouteTree, TRouteId>['types']['allParams'];
     status: 'pending' | 'success' | 'error';
     isFetching: boolean;
+    showPending: boolean;
     invalid: boolean;
     error: unknown;
     paramsError: unknown;

package/build/types/fileRoute.d.ts

@@ -19,8 +19,10 @@ export declare class FileRoute<TFilePath extends keyof FileRoutesByPath, TParent
         caseSensitive?: boolean | undefined;
         wrapInSuspense?: boolean | undefined;
         component?: import("./route").RouteComponent<TFullSearchSchema, TAllParams, TContext, TLoaderData> | undefined;
-        errorComponent?: import("./route").ErrorRouteComponent<TFullSearchSchema, TAllParams, {}> | undefined;
+        errorComponent?: import("./route").ErrorRouteComponent<TFullSearchSchema, TAllParams, TContext> | undefined;
         pendingComponent?: import("./route").PendingRouteComponent<TFullSearchSchema, TAllParams, TContext> | undefined;
+        pendingMs?: number | undefined;
+        pendingMinMs?: number | undefined;
         preSearchFilters?: import("./route").SearchFilter<TFullSearchSchema, TFullSearchSchema>[] | undefined;
         postSearchFilters?: import("./route").SearchFilter<TFullSearchSchema, TFullSearchSchema>[] | undefined;
         onError?: ((err: any) => void) | undefined;

package/build/types/route.d.ts

@@ -67,8 +67,10 @@ export type UpdatableRouteOptions<TFullSearchSchema extends Record<string, any>,
     caseSensitive?: boolean;
     wrapInSuspense?: boolean;
     component?: RouteComponent<TFullSearchSchema, TAllParams, TAllContext, TLoaderData>;
-    errorComponent?: ErrorRouteComponent<TFullSearchSchema, TAllParams, {}>;
+    errorComponent?: ErrorRouteComponent<TFullSearchSchema, TAllParams, TAllContext>;
     pendingComponent?: PendingRouteComponent<TFullSearchSchema, TAllParams, TAllContext>;
+    pendingMs?: number;
+    pendingMinMs?: number;
     preSearchFilters?: SearchFilter<TFullSearchSchema>[];
     postSearchFilters?: SearchFilter<TFullSearchSchema>[];
     onError?: (err: any) => void;

package/build/types/router.d.ts

@@ -40,16 +40,11 @@ export interface RouterOptions<TRouteTree extends AnyRoute, TDehydrated extends
     defaultComponent?: RouteComponent<AnySearchSchema, AnyPathParams, AnyContext>;
     defaultErrorComponent?: ErrorRouteComponent<AnySearchSchema, AnyPathParams, AnyContext>;
     defaultPendingComponent?: PendingRouteComponent<AnySearchSchema, 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'];
     routeMasks?: RouteMask<TRouteTree>[];
     unmaskOnReload?: boolean;

package/build/umd/index.development.js

@@ -978,8 +978,14 @@
     const route = routesById[routeId];
     const locationKey = useRouterState().location.state?.key;
     const PendingComponent = route.options.pendingComponent ?? options.defaultPendingComponent;
+    const pendingElement = PendingComponent ? /*#__PURE__*/React__namespace.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 ? React__namespace.Suspense : SafeFragment;
+    const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? pendingElement ? React__namespace.Suspense : SafeFragment;
     const errorComponent = routeErrorComponent ? React__namespace.useCallback(props => {
       return /*#__PURE__*/React__namespace.createElement(routeErrorComponent, {
         ...props,
@@ -993,12 +999,7 @@
     return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
       value: matches
     }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
-      fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, {
-        useMatch: route.useMatch,
-        useRouteContext: route.useRouteContext,
-        useSearch: route.useSearch,
-        useParams: route.useParams
-      })
+      fallback: pendingElement
     }, /*#__PURE__*/React__namespace.createElement(ResolvedCatchBoundary, {
       resetKey: locationKey,
       errorComponent: errorComponent,
@@ -1006,24 +1007,26 @@
         warning(false, `Error in route match: ${match.id}`);
       }
     }, /*#__PURE__*/React__namespace.createElement(MatchInner, {
-      match: match
+      match: match,
+      pendingElement: pendingElement
     }))));
   }
   function MatchInner({
-    match
+    match,
+    pendingElement
   }) {
     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;
     }
     if (match.status === 'success') {
@@ -1566,6 +1569,8 @@
     constructor(options) {
       this.updateOptions({
         defaultPreloadDelay: 50,
+        defaultPendingMs: 1000,
+        defaultPendingMinMs: 500,
         context: undefined,
         ...options,
         stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
@@ -1842,6 +1847,7 @@
           search: {},
           searchError: undefined,
           status: hasLoaders ? 'pending' : 'success',
+          showPending: false,
           isFetching: false,
           invalid: false,
           error: undefined,
@@ -2147,8 +2153,10 @@
           matches[index] = match = {
             ...match,
             fetchedAt: Date.now(),
-            invalid: false
+            invalid: false,
+            showPending: false
           };
+          const pendingPromise = new Promise(r => setTimeout(r, 1000));
           if (match.isFetching) {
             loadPromise = getRouteMatch(this.state, match.id)?.loadPromise;
           } else {
@@ -2213,41 +2221,65 @@
               matches: s.matches.map(d => d.id === match.id ? match : d)
             }));
           }
-          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
-            };
-          } catch (error) {
-            if (latestPromise = checkLatest()) return await latestPromise;
-            if (handleIfRedirect(error)) return;
+          let didShowPending = false;
+          await new Promise(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();
+              });
+            }
             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();
+          });
         })());
       });
       await Promise.all(matchPromises);