Add NavigationMenuListSkeleton

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

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 />}>