Add skeleton for TopMenu

components/Header/TopMenu/index.tsx

@@ -5,6 +5,7 @@ import {
 } from "@/lib/trpc/memoizedRequests"
 
 import LanguageSwitcher from "@/components/LanguageSwitcher"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { getIntl } from "@/i18n"
 
@@ -44,3 +45,15 @@ export default async function TopMenu() {
     </div>
   )
 }
+
+export function TopMenuSkeleton() {
+  return (
+    <div className={styles.topMenu}>
+      <div className={styles.content}>
+        <div className={styles.options}>
+          <SkeletonShimmer width="25ch" height="1.2em" />
+        </div>
+      </div>
+    </div>
+  )
+}

components/Header/index.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/lib/trpc/memoizedRequests"
 
 import MainMenu from "./MainMenu"
-import TopMenu from "./TopMenu"
+import TopMenu, { TopMenuSkeleton } from "./TopMenu"
 
 import styles from "./header.module.css"
 
@@ -18,7 +18,7 @@ export default function Header() {
 
   return (
     <header className={styles.header}>
-      <Suspense fallback="Loading top menu">
+      <Suspense fallback={<TopMenuSkeleton />}>
         <TopMenu />
       </Suspense>
       <Suspense fallback="Loading main menu">