From 6496ec233eb762b697585fb452bca1cdd8a46798 Mon Sep 17 00:00:00 2001
From: Anton Gunnarsson <anton.gunnarsson@scandichotels.com>
Date: Fri, 15 Nov 2024 10:39:27 +0100
Subject: [PATCH] Add NavigationMenuListSkeleton

---
 .../NavigationMenu/NavigationMenuList/index.tsx      | 12 ++++++++++++
 components/Header/MainMenu/index.tsx                 |  3 ++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx b/components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx
index e56e494a1..5d1b10185 100644
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx
+++ b/components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx
@@ -1,8 +1,10 @@
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import NavigationMenuItem from "../NavigationMenuItem"
 
 import styles from "./navigationMenuList.module.css"
 
 import type { NavigationMenuListProps } from "@/types/components/header/navigationMenuList"
+import { cx } from "class-variance-authority"
 
 export default function NavigationMenuList({
   isMobile,
@@ -20,3 +22,13 @@ export default function NavigationMenuList({
     </ul>
   )
 }
+
+export function NavigationMenuListSkeleton() {
+  return (
+    <ul className={cx(styles.navigationMenu, styles.desktop)}>
+      <li className={styles.item}>
+        <SkeletonShimmer width="30ch" />
+      </li>
+    </ul>
+  )
+}
diff --git a/components/Header/MainMenu/index.tsx b/components/Header/MainMenu/index.tsx
index 9fb174df2..208a64b89 100644
--- a/components/Header/MainMenu/index.tsx
+++ b/components/Header/MainMenu/index.tsx
@@ -13,6 +13,7 @@ import MyPagesMenuWrapper, {
 import NavigationMenu from "./NavigationMenu"
 
 import styles from "./mainMenu.module.css"
+import { NavigationMenuListSkeleton } from "./NavigationMenu/NavigationMenuList"
 
 export default function MainMenu() {
   return (
@@ -22,7 +23,7 @@ export default function MainMenu() {
           <MainMenuLogo />
         </Suspense>
         <div className={styles.menus}>
-          <Suspense fallback={"Loading nav"}>
+          <Suspense fallback={<NavigationMenuListSkeleton />}>
             <NavigationMenu isMobile={false} />
           </Suspense>
           <Suspense fallback={<MyPagesMenuWrapperSkeleton />}>