From aa946749d05060a192773da72a6eb4a1a76587ad Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Mon, 26 Feb 2024 16:39:34 +0800
Subject: [PATCH] fix: remove nav dropdown content lazy loading

---
 .../src/lib/navigation/desktop/index.tsx      | 25 +++----------------
 .../src/lib/navigation/mobile/index.tsx       | 13 +++-------
 2 files changed, 8 insertions(+), 30 deletions(-)

diff --git a/libs/blocks/src/lib/navigation/desktop/index.tsx b/libs/blocks/src/lib/navigation/desktop/index.tsx
index 7873ebd4c..7d4614629 100644
--- a/libs/blocks/src/lib/navigation/desktop/index.tsx
+++ b/libs/blocks/src/lib/navigation/desktop/index.tsx
@@ -1,9 +1,10 @@
 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 { Suspense, lazy } from 'react';
+import LanguageContent from '../language-switcher/language.content';
 
 const DesktopNavigation = ({
   renderButtons,
@@ -11,16 +12,6 @@ const DesktopNavigation = ({
   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();
 
@@ -56,16 +47,8 @@ const DesktopNavigation = ({
             {hasLanguageSwitch && <LanguageSwitcher />}
           </div>
         </nav>
-        {shouldRenderNavContent && (
-          <Suspense>
-            <LazyNavigationContent />
-          </Suspense>
-        )}
-        {showLangContent && (
-          <Suspense>
-            <LazyLanguageContent />
-          </Suspense>
-        )}
+        {shouldRenderNavContent && <NavigationContent />}
+        {showLangContent && <LanguageContent />}
       </div>
     </DesktopNavigationWrapper>
   );
diff --git a/libs/blocks/src/lib/navigation/mobile/index.tsx b/libs/blocks/src/lib/navigation/mobile/index.tsx
index 849d5a073..474f8540c 100644
--- a/libs/blocks/src/lib/navigation/mobile/index.tsx
+++ b/libs/blocks/src/lib/navigation/mobile/index.tsx
@@ -1,9 +1,10 @@
 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,
@@ -11,10 +12,6 @@ export const MobileNav: React.FC<NavigationProps> = ({
   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"
@@ -27,10 +24,8 @@ 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">
-              <Suspense>
-                <LazyMobileNavList />
-                <LazyMobileNavContent />
-              </Suspense>
+              <MobileNavList />
+              <MobileNavContentContainer />
               {hasLanguageSwitch && <MobileLanguageToggler />}
             </div>
           </div>