Break into smaller components

components/Header/index.tsx

@@ -1,39 +1,18 @@
 import { Suspense } from "react"
 
-import { serverClient } from "@/lib/trpc/server"
-
-import LoadingSpinner from "../LoadingSpinner"
 import MainMenu from "./MainMenu"
 import TopMenu from "./TopMenu"
 
 import styles from "./header.module.css"
 
-export default async function Header({
-  languageSwitcher,
-}: {
-  languageSwitcher: React.ReactNode
-}) {
-  const [languages, headerData] = await Promise.all([
-    serverClient().contentstack.languageSwitcher.get(),
-    serverClient().contentstack.base.header(),
-  ])
-
-  if (!languages || !headerData) {
-    return null
-  }
-
+export default async function Header({}) {
   return (
     <header className={styles.header}>
-      <Suspense fallback={<LoadingSpinner />}>
-        <TopMenu
-          languageSwitcher={languageSwitcher}
-          topLink={headerData.topLink}
-        />
-        <MainMenu
-          languageUrls={languages.urls}
-          menuItems={headerData.menuItems}
-          topLink={headerData.topLink}
-        />
+      <Suspense fallback="Loading top menu">
+        <TopMenu />
+      </Suspense>
+      <Suspense fallback="Loading main menu">
+        <MainMenu />
       </Suspense>
     </header>
   )