From ef825d85aadabe6fcdb9a48607478578239b46fb Mon Sep 17 00:00:00 2001
From: Anton Gunnarsson <anton.gunnarsson@scandichotels.com>
Date: Thu, 14 Nov 2024 13:44:58 +0100
Subject: [PATCH] Add skeleton loader for MobileMenu

---
 components/Header/MainMenu/MobileMenu/index.tsx | 17 +++++++++++++++++
 components/Header/MainMenu/index.tsx            |  3 ++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/components/Header/MainMenu/MobileMenu/index.tsx b/components/Header/MainMenu/MobileMenu/index.tsx
index 621529b0f..d5c2063a0 100644
--- a/components/Header/MainMenu/MobileMenu/index.tsx
+++ b/components/Header/MainMenu/MobileMenu/index.tsx
@@ -93,3 +93,20 @@ export default function MobileMenu({
     </>
   )
 }
+
+export function MobileMenuSkeleton() {
+  const intl = useIntl()
+
+  return (
+    <button
+      type="button"
+      disabled
+      className={styles.hamburger}
+      aria-label={intl.formatMessage({
+        id: "Open menu",
+      })}
+    >
+      <span className={styles.bar} />
+    </button>
+  )
+}
diff --git a/components/Header/MainMenu/index.tsx b/components/Header/MainMenu/index.tsx
index fd089df3e..9f49a09d9 100644
--- a/components/Header/MainMenu/index.tsx
+++ b/components/Header/MainMenu/index.tsx
@@ -5,6 +5,7 @@ import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
+import { MobileMenuSkeleton } from "./MobileMenu"
 import MobileMenuWrapper from "./MobileMenuWrapper"
 import MyPagesMenuWrapper, {
   MyPagesMenuWrapperSkeleton,
@@ -37,7 +38,7 @@ export default async function MainMenu() {
           <Suspense fallback={<MyPagesMenuWrapperSkeleton />}>
             <MyPagesMenuWrapper />
           </Suspense>
-          <Suspense fallback={"Loading menu"}>
+          <Suspense fallback={<MobileMenuSkeleton />}>
             <MobileMenuWrapper>
               <NavigationMenu isMobile={true} />
             </MobileMenuWrapper>