From d4afa54934eec0ca450a0df60ed7fb4104e10eb4 Mon Sep 17 00:00:00 2001
From: Anton Gunnarsson <anton.gunnarsson@scandichotels.com>
Date: Thu, 14 Nov 2024 13:48:48 +0100
Subject: [PATCH] Add skeleton for TopMenu

---
 components/Header/TopMenu/index.tsx | 13 +++++++++++++
 components/Header/index.tsx         |  4 ++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/components/Header/TopMenu/index.tsx b/components/Header/TopMenu/index.tsx
index 1fed5161e..097430b32 100644
--- a/components/Header/TopMenu/index.tsx
+++ b/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>
+  )
+}
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 2d5fde2ad..9a71d45cf 100644
--- a/components/Header/index.tsx
+++ b/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">