fix: wrap layout into suspense to prevent update it

rambler-digital-solutions · Dec 19, 2023 · 997fab1 · 997fab1
1 parent 5563aea
commit 997fab1
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 35 deletions.
diff --git a/src/client/stream.tsx b/src/client/stream.tsx
@@ -54,13 +54,12 @@ export const hydrateFromStream = async (
     <AppContextProvider value={appContext}>
       <Document>
         <BrowserRouter>
-          <Layout {...rest}>
-            <Routes
-              routes={routes}
-              scrollToTop={scrollToTop}
-              transition={transition}
-            />
-          </Layout>
+          <Routes
+            routes={routes}
+            scrollToTop={scrollToTop}
+            transition={transition}
+            Layout={Layout}
+          />
         </BrowserRouter>
       </Document>
     </AppContextProvider>

diff --git a/src/components/routes.tsx b/src/components/routes.tsx
@@ -8,20 +8,22 @@ import {
 } from 'react-router-dom'
 import {type PageRoute, TransitionMode} from '../common/types'
 import {useAppContext} from './context'
-import {loadRouteData} from './loader'
+import {loadRouteData, matchRoute} from './loader'
 
 /** Routing props */
 export interface RoutesProps {
   routes: PageRoute[]
   scrollToTop?: boolean
   transition?: TransitionMode
+  Layout: React.FC<any>
 }
 
 /** Routing component with initial and meta data */
 export const Routes: React.FC<RoutesProps> = ({
   routes,
   scrollToTop,
-  transition
+  transition,
+  Layout
 }) => {
   const location = useLocation()
   const navigate = useNavigate()
@@ -79,30 +81,36 @@ export const Routes: React.FC<RoutesProps> = ({
   }, [location, currentLocation, scrollToTop]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const routerLocation = isBlockedMode ? currentLocation : location
+  const match = matchRoute({pathname: routerLocation.pathname, routes})
+  const Fallback = match?.route.Fallback
 
   return (
-    <BaseRoutes location={routerLocation}>
-      {routeData.data?.redirect && <Navigate to={routeData.data.redirect} />}
-      {routes.map(({path, Component, Fallback, ...routeProps}) => (
-        <Route
-          {...routeProps}
-          key={path}
-          path={path}
-          element={
-            <Suspense fallback={Fallback ? <Fallback /> : undefined}>
-              {isWaitingMode && routeData.isLoading && Fallback ? (
-                <Fallback />
-              ) : (
-                <Component
-                  {...rest}
-                  {...routeData.data}
-                  isLoading={routeData.isLoading}
-                />
-              )}
-            </Suspense>
-          }
-        />
-      ))}
-    </BaseRoutes>
+    <Suspense fallback={Fallback ? <Fallback /> : undefined}>
+      <Layout {...rest}>
+        <BaseRoutes location={routerLocation}>
+          {routeData.data?.redirect && (
+            <Navigate to={routeData.data.redirect} />
+          )}
+          {routes.map(({path, Component, Fallback, ...routeProps}) => (
+            <Route
+              {...routeProps}
+              key={path}
+              path={path}
+              element={
+                isWaitingMode && routeData.isLoading && Fallback ? (
+                  <Fallback />
+                ) : (
+                  <Component
+                    {...rest}
+                    {...routeData.data}
+                    isLoading={routeData.isLoading}
+                  />
+                )
+              }
+            />
+          ))}
+        </BaseRoutes>
+      </Layout>
+    </Suspense>
   )
 }
diff --git a/src/server/stream.tsx b/src/server/stream.tsx
@@ -105,9 +105,7 @@ export const renderToStream = async (
     <AppContextProvider value={appContext}>
       <Document>
         <StaticRouter location={pathname}>
-          <Layout {...rest}>
-            <Routes routes={routes} />
-          </Layout>
+          <Routes routes={routes} Layout={Layout} />
         </StaticRouter>
       </Document>
     </AppContextProvider>