From 8007fea61e3e0ae7b7dfbaa63a903f948cb8a2da Mon Sep 17 00:00:00 2001
From: Anton Gunnarsson <anton.gunnarsson@scandichotels.com>
Date: Fri, 15 Nov 2024 09:24:15 +0100
Subject: [PATCH] Refactor MainMenu suspense boundary

---
 components/Header/MainMenu/index.tsx | 40 ++++++++++++++++++----------
 components/Header/index.tsx          |  6 ++---
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/components/Header/MainMenu/index.tsx b/components/Header/MainMenu/index.tsx
index 9f49a09d9..9fb174df2 100644
--- a/components/Header/MainMenu/index.tsx
+++ b/components/Header/MainMenu/index.tsx
@@ -14,23 +14,13 @@ import NavigationMenu from "./NavigationMenu"
 
 import styles from "./mainMenu.module.css"
 
-export default async function MainMenu() {
-  const lang = getLang()
-
-  const intl = await getIntl()
-
+export default 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}
-            height={22}
-            src="/_static/img/scandic-logotype.svg"
-            width={103}
-          />
-        </NextLink>
+        <Suspense fallback={<Logo alt="..." />}>
+          <MainMenuLogo />
+        </Suspense>
         <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>
+  )
+}
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 9a71d45cf..37741c5b9 100644
--- a/components/Header/index.tsx
+++ b/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 />
-      </Suspense>
+      <MainMenu />
     </header>
   )
 }