Break into smaller components

components/Header/MainMenu/index.tsx

@@ -1,4 +1,5 @@
 import NextLink from "next/link"
+import { Suspense } from "react"
 
 import { myPages } from "@/constants/routes/myPages"
 import { serverClient } from "@/lib/trpc/server"
@@ -18,13 +19,46 @@ import styles from "./mainMenu.module.css"
 
 import type { MainMenuProps } from "@/types/components/header/mainMenu"
 
-export default async function MainMenu({
-  languageUrls,
-  menuItems,
-  topLink,
-}: MainMenuProps) {
+export default async function MainMenu({}: MainMenuProps) {
   const lang = getLang()
 
+  const intl = await getIntl()
+
+  return (
+    <div className={styles.mainMenu}>
+      <nav className={styles.nav}>
+        <NextLink className={styles.logoLink} href={`/${lang}`}>
+          <Suspense>
+            <Image
+              alt={intl.formatMessage({ id: "Back to scandichotels.com" })}
+              className={styles.logo}
+              data-js="scandiclogoimg"
+              data-nosvgsrc="/_static/img/scandic-logotype.png"
+              itemProp="logo"
+              height={22}
+              src="/_static/img/scandic-logotype.svg"
+              width={103}
+            />
+          </Suspense>
+        </NextLink>
+        <div className={styles.menus}>
+          <Suspense fallback={"Loading nav"}>
+            <NavigationMenu isMobile={false} />
+          </Suspense>
+          <Suspense fallback={"Loading profile"}>
+            <MyPagesMenuServer />
+          </Suspense>
+          <Suspense fallback={"Loading menu"}>
+            <MobileMenuServer />
+          </Suspense>
+        </div>
+      </nav>
+    </div>
+  )
+}
+
+async function MyPagesMenuServer({}) {
+  const lang = getLang()
   const [intl, myPagesNavigation, user, membership] = await Promise.all([
     getIntl(),
     serverClient().contentstack.myPages.navigation.get(),
@@ -33,54 +67,47 @@ export default async function MainMenu({
   ])
 
   return (
-    <div className={styles.mainMenu}>
-      <nav className={styles.nav}>
-        <NextLink className={styles.logoLink} href={`/${lang}`}>
-          <Image
-            alt={intl.formatMessage({ id: "Back to scandichotels.com" })}
-            className={styles.logo}
-            data-js="scandiclogoimg"
-            data-nosvgsrc="/_static/img/scandic-logotype.png"
-            itemProp="logo"
-            height={22}
-            src="/_static/img/scandic-logotype.svg"
-            width={103}
+    <>
+      {user ? (
+        <>
+          <MyPagesMenu
+            membership={membership}
+            navigation={myPagesNavigation}
+            user={user}
           />
-        </NextLink>
-        <div className={styles.menus}>
-          <NavigationMenu items={menuItems} isMobile={false} />
-          {user ? (
-            <>
-              <MyPagesMenu
-                membership={membership}
-                navigation={myPagesNavigation}
-                user={user}
-              />
-              <MyPagesMobileMenu
-                membership={membership}
-                navigation={myPagesNavigation}
-                user={user}
-              />
-            </>
-          ) : (
-            <Link
-              href={myPages[lang]}
-              className={styles.loginLink}
-              aria-label={intl.formatMessage({ id: "Log in/Join" })}
-            >
-              <Avatar />
-              <span className={styles.userName}>
-                {intl.formatMessage({ id: "Log in/Join" })}
-              </span>
-            </Link>
-          )}
-          <MobileMenu
-            languageUrls={languageUrls}
-            menuItems={menuItems}
-            topLink={topLink}
+          <MyPagesMobileMenu
+            membership={membership}
+            navigation={myPagesNavigation}
+            user={user}
           />
-        </div>
-      </nav>
-    </div>
+        </>
+      ) : (
+        <Link
+          href={myPages[lang]}
+          className={styles.loginLink}
+          aria-label={intl.formatMessage({ id: "Log in/Join" })}
+        >
+          <Avatar />
+          <span className={styles.userName}>
+            {intl.formatMessage({ id: "Log in/Join" })}
+          </span>
+        </Link>
+      )}
+    </>
+  )
+}
+
+async function MobileMenuServer({}) {
+  const [languages, headerData] = await Promise.all([
+    serverClient().contentstack.languageSwitcher.get(),
+    serverClient().contentstack.base.header(),
+  ])
+
+  if (!languages || !headerData) {
+    return null
+  }
+
+  return (
+    <MobileMenu languageUrls={languages.urls} topLink={headerData?.topLink} />
   )
 }