Merge pull request #387 from deriv-com/nuzhy/remove-nav-content-lazy-…

…loading
deriv-com · Feb 26, 2024 · b404ddb · b404ddb
2 parents b02f35a + aa94674
commit b404ddb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 30 deletions.
diff --git a/libs/blocks/src/lib/navigation/desktop/index.tsx b/libs/blocks/src/lib/navigation/desktop/index.tsx
@@ -1,26 +1,17 @@
 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,
   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();
 
@@ -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
@@ -1,20 +1,17 @@
 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"
@@ -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>