fix: skeletons for headers to avoid data fetching

components/Current/Header/MainMenu/index.tsx

@@ -9,6 +9,7 @@ import useDropdownStore from "@/stores/main-menu"
 import Image from "@/components/Image"
 import LoginButton from "@/components/LoginButton"
 import Avatar from "@/components/MyPages/Avatar"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 import { trackClick } from "@/utils/tracking"
@@ -227,3 +228,56 @@ export function MainMenu({
     </div>
   )
 }
+
+export function MainMenuSkeleton() {
+  const intl = useIntl()
+
+  const links = new Array(5).fill("")
+  return (
+    <div className={styles.mainMenu}>
+      <div
+        className={styles.container}
+        itemScope
+        itemType="http://schema.org/Organization"
+      >
+        <meta itemProp="name" content="Scandic" />
+        <nav className={styles.navBar}>
+          <button
+            aria-pressed="false"
+            className={styles.expanderBtn}
+            type="button"
+          >
+            <span className={styles.iconBars}></span>
+            <span className={styles.hiddenAccessible}>Menu</span>
+          </button>
+
+          <a className={styles.logoLink} href={""}>
+            <Image
+              alt="Scandic Hotels logo"
+              className={styles.logo}
+              data-js="scandiclogoimg"
+              itemProp="logo"
+              height={20}
+              src={"/_static/img/scandic-logotype.png"}
+              width={200}
+            />
+          </a>
+
+          <ul className={styles.listWrapper}>
+            {links.map((link, i) => (
+              <li
+                className={`${styles.li} ${styles.skeletonWrapper}`}
+                key={link.href + i}
+              >
+                <SkeletonShimmer height="22px" width="130px" />
+              </li>
+            ))}
+          </ul>
+          <div className={styles.buttonContainer}>
+            <BookingButton href={""} />
+          </div>
+        </nav>
+      </div>
+    </div>
+  )
+}