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

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}