Langswitcher as parallel instead of Header. Using promise.all and added some Suspenses

components/Header/MainMenu/index.tsx

@@ -23,13 +23,14 @@ export default async function MainMenu({
   menuItems,
   topLink,
 }: MainMenuProps) {
-  const intl = await getIntl()
   const lang = getLang()
-  const myPagesNavigation =
-    await serverClient().contentstack.myPages.navigation.get()
 
-  const user = await serverClient().user.name()
-  const membership = await serverClient().user.safeMembershipLevel()
+  const [intl, myPagesNavigation, user, membership] = await Promise.all([
+    getIntl(),
+    serverClient().contentstack.myPages.navigation.get(),
+    serverClient().user.name(),
+    serverClient().user.safeMembershipLevel(),
+  ])
 
   return (
     <div className={styles.mainMenu}>

components/Header/TopMenu/index.tsx

@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import { GiftIcon, SearchIcon } from "@/components/Icons"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { getIntl } from "@/i18n"
@@ -8,7 +10,10 @@ import styles from "./topMenu.module.css"
 
 import type { TopMenuProps } from "@/types/components/header/topMenu"
 
-export default async function TopMenu({ languageUrls, topLink }: TopMenuProps) {
+export default async function TopMenu({
+  languageSwitcher,
+  topLink,
+}: TopMenuProps) {
   const intl = await getIntl()
 
   return (
@@ -21,7 +26,7 @@ export default async function TopMenu({ languageUrls, topLink }: TopMenuProps) {
           </HeaderLink>
         ) : null}
         <div className={styles.options}>
-          <LanguageSwitcher type="desktopHeader" urls={languageUrls} />
+          <Suspense>{languageSwitcher}</Suspense>
           <HeaderLink href="#">
             <SearchIcon width={20} height={20} color="burgundy" />
             {intl.formatMessage({ id: "Find booking" })}

components/Header/index.tsx

@@ -8,9 +8,15 @@ import TopMenu from "./TopMenu"
 
 import styles from "./header.module.css"
 
-export default async function Header() {
-  const languages = await serverClient().contentstack.languageSwitcher.get()
-  const headerData = await serverClient().contentstack.base.header()
+export interface HeaderProps {
+  languageSwitcher: React.ReactNode
+}
+
+export default async function Header({ languageSwitcher }: HeaderProps) {
+  const [languages, headerData] = await Promise.all([
+    serverClient().contentstack.languageSwitcher.get(),
+    serverClient().contentstack.base.header(),
+  ])
 
   if (!languages || !headerData) {
     return null
@@ -19,7 +25,10 @@ export default async function Header() {
   return (
     <header className={styles.header}>
       <Suspense fallback={<LoadingSpinner />}>
-        <TopMenu languageUrls={languages.urls} topLink={headerData.topLink} />
+        <TopMenu
+          languageSwitcher={languageSwitcher}
+          topLink={headerData.topLink}
+        />
         <MainMenu
           languageUrls={languages.urls}
           menuItems={headerData.menuItems}