chore: lazy loading navigation components

libs/blocks/src/lib/navigation/desktop/index.tsx

@@ -1,17 +1,26 @@
 import { NavigationProps } from '..';
 import DesktopNavigationWrapper from './desktop.wrapper';
 import NavList from './desktop.nav-list';
-import { NavigationContent } from '../navigation.content';
 import { useNavigation } from '@deriv-com/hooks';
 import LanguageSwitcher from '../language-switcher';
-import LanguageContent from '../language-switcher/language.content';
+import { Suspense, lazy } from 'react';
 
 const DesktopNavigation = ({
   renderButtons,
   renderLogo,
   hasLanguageSwitch,
   topNavigation,
 }: NavigationProps) => {
+  const LazyNavigationContent = lazy(() =>
+    import('../navigation.content').then(({ NavigationContent }) => ({
+      default: NavigationContent,
+    })),
+  );
+
+  const LazyLanguageContent = lazy(
+    () => import('../language-switcher/language.content'),
+  );
+
   const { activeMenu, navItems, activeItem, navDropDownState, onItemHover } =
     useNavigation();
 
@@ -47,8 +56,16 @@ const DesktopNavigation = ({
             {hasLanguageSwitch && <LanguageSwitcher />}
           </div>
         </nav>
-        {shouldRenderNavContent && <NavigationContent />}
-        {showLangContent && <LanguageContent />}
+        {shouldRenderNavContent && (
+          <Suspense>
+            <LazyNavigationContent />
+          </Suspense>
+        )}
+        {showLangContent && (
+          <Suspense>
+            <LazyLanguageContent />
+          </Suspense>
+        )}
       </div>
     </DesktopNavigationWrapper>
   );

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>