Refactor MainMenu suspense boundary

components/Header/MainMenu/index.tsx

@@ -14,23 +14,13 @@ import NavigationMenu from "./NavigationMenu"
 
 import styles from "./mainMenu.module.css"
 
-export default async function MainMenu() {
+export default function MainMenu() {
-  const lang = getLang()
-
-  const intl = await getIntl()
-
   return (
     <div className={styles.mainMenu}>
       <nav className={styles.nav}>
-        <NextLink className={styles.logoLink} href={`/${lang}`}>
+        <Suspense fallback={<Logo alt="..." />}>
-          <Image
+          <MainMenuLogo />
-            alt={intl.formatMessage({ id: "Back to scandichotels.com" })}
+        </Suspense>
-            className={styles.logo}
-            height={22}
-            src="/_static/img/scandic-logotype.svg"
-            width={103}
-          />
-        </NextLink>
         <div className={styles.menus}>
           <Suspense fallback={"Loading nav"}>
             <NavigationMenu isMobile={false} />
@@ -48,3 +38,25 @@ export default async function MainMenu() {
     </div>
   )
 }
+
+async function MainMenuLogo() {
+  const intl = await getIntl()
+
+  return <Logo alt={intl.formatMessage({ id: "Back to scandichotels.com" })} />
+}
+
+function Logo({ alt }: { alt: string }) {
+  const lang = getLang()
+
+  return (
+    <NextLink className={styles.logoLink} href={`/${lang}`}>
+      <Image
+        alt={alt}
+        className={styles.logo}
+        height={22}
+        src="/_static/img/scandic-logotype.svg"
+        width={103}
+      />
+    </NextLink>
+  )
+}

components/Header/index.tsx

@@ -11,7 +11,7 @@ import TopMenu, { TopMenuSkeleton } from "./TopMenu"
 
 import styles from "./header.module.css"
 
-export default function Header() {
+export default async function Header() {
   void getHeader()
   void getLanguageSwitcher()
   void getName()
@@ -21,9 +21,7 @@ export default function Header() {
       <Suspense fallback={<TopMenuSkeleton />}>
         <TopMenu />
       </Suspense>
-      <Suspense fallback="Loading main menu">
+      <MainMenu />
-        <MainMenu />
-      </Suspense>
     </header>
   )
 }