Skeleton loader for booking widget on desktop

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -6,6 +6,7 @@ import { useIntl } from "react-intl"
 import useDropdownStore from "@/stores/main-menu"
 
 import { ChevronDownSmallIcon } from "@/components/Icons"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
@@ -73,3 +74,13 @@ export default function MyPagesMenu({
     </div>
   )
 }
+
+export function MyPagesMenuSkeleton() {
+  return (
+    <MainMenuButton>
+      <Avatar />
+      <SkeletonShimmer width="10ch" />
+      <ChevronDownSmallIcon className={`${styles.chevron}`} color="red" />
+    </MainMenuButton>
+  )
+}

components/Header/MainMenu/MyPagesMenuWrapper/index.tsx

@@ -10,7 +10,7 @@ import LoginButton from "@/components/LoginButton"
 import { getIntl } from "@/i18n"
 
 import Avatar from "../Avatar"
-import MyPagesMenu from "../MyPagesMenu"
+import MyPagesMenu, { MyPagesMenuSkeleton } from "../MyPagesMenu"
 import MyPagesMobileMenu from "../MyPagesMobileMenu"
 
 import styles from "./myPagesMenuWrapper.module.css"
@@ -62,3 +62,12 @@ export default async function MyPagesMenuWrapper() {
     </>
   )
 }
+
+export function MyPagesMenuWrapperSkeleton() {
+  return (
+    <div>
+      <MyPagesMenuSkeleton />
+      {/* <MyPagesMobileMenuSkeleton /> */}
+    </div>
+  )
+}

components/Header/MainMenu/index.tsx

@@ -6,7 +6,9 @@ import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
 import MobileMenuWrapper from "./MobileMenuWrapper"
-import MyPagesMenuWrapper from "./MyPagesMenuWrapper"
+import MyPagesMenuWrapper, {
+  MyPagesMenuWrapperSkeleton,
+} from "./MyPagesMenuWrapper"
 import NavigationMenu from "./NavigationMenu"
 
 import styles from "./mainMenu.module.css"
@@ -32,7 +34,7 @@ export default async function MainMenu() {
           <Suspense fallback={"Loading nav"}>
             <NavigationMenu isMobile={false} />
           </Suspense>
-          <Suspense fallback={"Loading profile"}>
+          <Suspense fallback={<MyPagesMenuWrapperSkeleton />}>
             <MyPagesMenuWrapper />
           </Suspense>
           <Suspense fallback={"Loading menu"}>