From e0b7c3be7b244816295d8082056860a09636ea32 Mon Sep 17 00:00:00 2001
From: Anton Gunnarsson <anton.gunnarsson@scandichotels.com>
Date: Thu, 20 Mar 2025 09:42:33 +0000
Subject: [PATCH] Merged in fix/preload-my-pages-menu-data (pull request #1582)

Fix/preload my pages menu data

* Preload my pages navigation data

* Remove unused suspense boundary


Approved-by: Linus Flood
---
 .../components/Header/MainMenu/MyPagesMenu/index.tsx      | 5 ++++-
 .../Header/MainMenu/MyPagesMenuContent/index.tsx          | 2 +-
 apps/scandic-web/components/Header/MainMenu/index.tsx     | 8 ++------
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/apps/scandic-web/components/Header/MainMenu/MyPagesMenu/index.tsx b/apps/scandic-web/components/Header/MainMenu/MyPagesMenu/index.tsx
index 96bf11828..224c9751a 100644
--- a/apps/scandic-web/components/Header/MainMenu/MyPagesMenu/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/MyPagesMenu/index.tsx
@@ -14,7 +14,7 @@ import { type FriendsMembership, getInitials } from "@/utils/user"
 
 import Avatar from "../Avatar"
 import MainMenuButton from "../MainMenuButton"
-import MyPagesMenuContent from "../MyPagesMenuContent"
+import MyPagesMenuContent, { useMyPagesNavigation } from "../MyPagesMenuContent"
 
 import styles from "./myPagesMenu.module.css"
 
@@ -36,6 +36,9 @@ export default function MyPagesMenu({
   const intl = useIntl()
   const myPagesMenuRef = useRef<HTMLDivElement>(null)
 
+  // Preload navigation content
+  useMyPagesNavigation()
+
   const { toggleDropdown, isMyPagesMenuOpen } = useDropdownStore()
 
   useHandleKeyUp((event: KeyboardEvent) => {
diff --git a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx
index 00e9bf402..8f5f6d696 100644
--- a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx
@@ -148,7 +148,7 @@ function SecondaryLinks({
   )
 }
 
-const useMyPagesNavigation = () => {
+export const useMyPagesNavigation = () => {
   const lang = useLang()
   return trpc.navigation.myPages.useQuery({
     lang: lang,
diff --git a/apps/scandic-web/components/Header/MainMenu/index.tsx b/apps/scandic-web/components/Header/MainMenu/index.tsx
index 3db207138..b713d89bc 100644
--- a/apps/scandic-web/components/Header/MainMenu/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/index.tsx
@@ -4,9 +4,7 @@ import { NavigationMenuListSkeleton } from "./NavigationMenu/NavigationMenuList"
 import { LogoLink } from "./LogoLink"
 import { MobileMenuSkeleton } from "./MobileMenu"
 import MobileMenuWrapper from "./MobileMenuWrapper"
-import MyPagesMenuWrapper, {
-  MyPagesMenuWrapperSkeleton,
-} from "./MyPagesMenuWrapper"
+import MyPagesMenuWrapper from "./MyPagesMenuWrapper"
 import NavigationMenu from "./NavigationMenu"
 
 import styles from "./mainMenu.module.css"
@@ -20,9 +18,7 @@ export default function MainMenu() {
           <Suspense fallback={<NavigationMenuListSkeleton />}>
             <NavigationMenu isMobile={false} />
           </Suspense>
-          <Suspense fallback={<MyPagesMenuWrapperSkeleton />}>
-            <MyPagesMenuWrapper />
-          </Suspense>
+          <MyPagesMenuWrapper />
           <Suspense fallback={<MobileMenuSkeleton />}>
             <MobileMenuWrapper>
               <NavigationMenu isMobile={true} />