Add skeleton loader for MobileMenu

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>
+  )
+}

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>