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

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) => {

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,

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, {
+import MyPagesMenuWrapper from "./MyPagesMenuWrapper"
-  MyPagesMenuWrapperSkeleton,
-} 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 />
-            <MyPagesMenuWrapper />
-          </Suspense>
           <Suspense fallback={<MobileMenuSkeleton />}>
             <MobileMenuWrapper>
               <NavigationMenu isMobile={true} />