fix: skeletons for headers to avoid data fetching

components/Current/Header/TopMenu/index.tsx

@@ -3,6 +3,7 @@ import { overview } from "@/constants/routes/myPages"
 import { getName } from "@/lib/trpc/memoizedRequests"
 
 import LoginButton from "@/components/LoginButton"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
@@ -68,6 +69,8 @@ export default async function TopMenu({
                 position="hamburger menu"
                 trackingId="loginStartTopMenu"
                 className={`${styles.sessionLink} ${styles.loginLink}`}
+                variant="default"
+                size="small"
               >
                 {intl.formatMessage({ id: "Log in" })}
               </LoginButton>
@@ -78,3 +81,32 @@ export default async function TopMenu({
     </div>
   )
 }
+
+export async function TopMenuSkeleton() {
+  const intl = await getIntl()
+  const links = new Array(5).fill("")
+  return (
+    <div className={styles.topMenu}>
+      <div className={styles.container}>
+        <ul className={styles.list}>
+          {links.map((link, i) => (
+            <li key={link.href + i} className={styles.skeletonWrapper}>
+              <SkeletonShimmer width="100px" height="16px" />
+            </li>
+          ))}
+          <li className={styles.sessionContainer}>
+            <LoginButton
+              position="hamburger menu"
+              trackingId="loginStartTopMenu"
+              className={`${styles.sessionLink} ${styles.loginLink}`}
+              variant="default"
+              size="small"
+            >
+              {intl.formatMessage({ id: "Log in" })}
+            </LoginButton>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}