feat: add transition mode for pending data

* feat: render fallback if route data is loading * feat: add new transition mode for pending data * style: transition mode names --------- Co-authored-by: Mikhail Tsipotan <[email protected]>
rambler-digital-solutions · Dec 7, 2023 · 94c4b66 · 94c4b66
1 parent 6a521dc
commit 94c4b66
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/.size-limit.json b/.size-limit.json
@@ -1,10 +1,10 @@
 [
   {
     "path": "dist/client/index.js",
-    "limit": "6.95 KB"
+    "limit": "7.01 KB"
   },
   {
     "path": "dist/server/index.js",
-    "limit": "6.97 KB"
+    "limit": "7.02 KB"
   }
 ]
diff --git a/src/common/types.ts b/src/common/types.ts
@@ -73,7 +73,10 @@ export type GetMetaData = Loader<MetaData, {data: InitialData}>
  * export default MainPage
  * ```
  */
-export type PageComponent<P = any> = React.ComponentType<P> & {
+
+export type PageComponent<P = any> = React.ComponentType<
+  P & {isLoading: boolean}
+> & {
   getMetaData?: GetMetaData
   getInitialData?: GetInitialData
 }
@@ -96,7 +99,9 @@ export type PageRoute = RouteProps & {
 export enum TransitionMode {
   /** Wait for `getInitialData` to get completed, and show the next page */
   BLOCKED = 'blocked',
-  /** Show the next page with spinner or skeleton while `getInitialData` is pending */
+  /** Show Fallback component while `getInitialData` is pending */
+  WAIT_FOR_DATA = 'wait-for-data',
+  /** Show Fallback component while Suspense is pending */
   INSTANT = 'instant'
 }
 

diff --git a/src/components/routes.tsx b/src/components/routes.tsx
@@ -54,12 +54,16 @@ export const Routes: React.FC<RoutesProps> = ({
 
       setRouteData((prevState) => ({...prevState, isLoading: true}))
 
-      if (scrollToTop && transition === TransitionMode.INSTANT) {
+      if (
+        scrollToTop &&
+        (transition === TransitionMode.WAIT_FOR_DATA ||
+          transition === TransitionMode.INSTANT)
+      ) {
         window.scrollTo(0, 0)
       }
 
       loadRouteData({pathname, routes, context}).then((routeData) => {
-        if (scrollToTop && transition !== TransitionMode.INSTANT) {
+        if (scrollToTop && transition === TransitionMode.BLOCKED) {
           window.scrollTo(0, 0)
         }
 
@@ -76,7 +80,12 @@ export const Routes: React.FC<RoutesProps> = ({
   }, [location, currentLocation, scrollToTop]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const routerLocation =
-    transition === TransitionMode.INSTANT ? location : currentLocation
+    transition === TransitionMode.WAIT_FOR_DATA ||
+    transition === TransitionMode.INSTANT
+      ? location
+      : currentLocation
+
+  const pageData = {...routeData.data, isLoading: routeData.isLoading}
 
   return (
     <BaseRoutes location={routerLocation}>
@@ -88,7 +97,13 @@ export const Routes: React.FC<RoutesProps> = ({
           path={path}
           element={
             <Suspense fallback={Fallback ? <Fallback /> : null}>
-              <Component {...rest} {...routeData.data} />
+              {transition === TransitionMode.WAIT_FOR_DATA &&
+              routeData.isLoading &&
+              Fallback ? (
+                <Fallback />
+              ) : (
+                <Component {...rest} {...pageData} />
+              )}
             </Suspense>
           }
         />