chore: lazy loading mobile navigation

deriv-com · Feb 15, 2024 · 8f5355a · 8f5355a
1 parent 9c076df
commit 8f5355a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 21 deletions.
diff --git a/libs/blocks/src/lib/navigation/index.tsx b/libs/blocks/src/lib/navigation/index.tsx
@@ -1,4 +1,6 @@
-import { ReactNode, Suspense, lazy } from 'react';
+import { ReactNode } from 'react';
+import DesktopNavigation from './desktop';
+import MobileNav from './mobile';
 import { NavLinkItems, NavigationProvider } from '@deriv-com/providers';
 
 export interface NavigationProps {
@@ -16,25 +18,21 @@ export const NavigationBlock = ({
   hasLanguageSwitch = true,
   topNavigation,
 }: NavigationProps) => {
-  const LazyDesktopNav = lazy(() => import('./desktop'));
-  const LazyMobileNav = lazy(() => import('./mobile'));
   return (
     <NavigationProvider navItems={items}>
       {/* // TODO: add conditional rendering when we have useBreakpoints from quill-design */}
-      <Suspense>
-        <LazyDesktopNav
-          renderButtons={renderButtons}
-          renderLogo={renderLogo}
-          hasLanguageSwitch={hasLanguageSwitch}
-          topNavigation={topNavigation}
-        />
-        <LazyMobileNav
-          renderButtons={renderButtons}
-          renderLogo={renderLogo}
-          hasLanguageSwitch={hasLanguageSwitch}
-          topNavigation={topNavigation}
-        />
-      </Suspense>
+      <DesktopNavigation
+        renderButtons={renderButtons}
+        renderLogo={renderLogo}
+        hasLanguageSwitch={hasLanguageSwitch}
+        topNavigation={topNavigation}
+      />
+      <MobileNav
+        renderButtons={renderButtons}
+        renderLogo={renderLogo}
+        hasLanguageSwitch={hasLanguageSwitch}
+        topNavigation={topNavigation}
+      />
     </NavigationProvider>
   );
 };

diff --git a/libs/blocks/src/lib/navigation/mobile/index.tsx b/libs/blocks/src/lib/navigation/mobile/index.tsx
@@ -1,17 +1,20 @@
 import { FluidContainer } from '@deriv/quill-design';
 import NavMobileWrapper from './mobile.wrapper';
 import MobileHeader from './mobile.header';
-import MobileNavList from './mobile.nav-list';
-import MobileNavContentContainer from './mobile.nav-content.container';
 import { NavigationProps } from '..';
 import MobileLanguageToggler from '../language-switcher/mobile-language';
+import { Suspense, lazy } from 'react';
 
 export const MobileNav: React.FC<NavigationProps> = ({
   renderLogo,
   renderButtons,
   hasLanguageSwitch,
   topNavigation,
 }) => {
+  const LazyMobileNavList = lazy(() => import('./mobile.nav-list'));
+  const LazyMobileNavContent = lazy(
+    () => import('./mobile.nav-content.container'),
+  );
   return (
     <FluidContainer
       className="fixed z-50 w-screen bg-background-primary-container lg:hidden"
@@ -24,8 +27,10 @@ export const MobileNav: React.FC<NavigationProps> = ({
           <div className="flex h-full flex-col justify-between">
             <MobileHeader />
             <div className="relative flex flex-1 flex-col justify-between px-general-2xl pb-general-lg sm:pb-general-md">
-              <MobileNavList />
-              <MobileNavContentContainer />
+              <Suspense>
+                <LazyMobileNavList />
+                <LazyMobileNavContent />
+              </Suspense>
               {hasLanguageSwitch && <MobileLanguageToggler />}
             </div>
           </div>