From c45ef9d4a7551a535b44f484f820e36573b0328e Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Tue, 17 Dec 2024 07:45:55 +0100
Subject: [PATCH] Splitted sidebar skeletons

---
 .../(live)/(protected)/my-pages/layout.tsx    |  4 +-
 components/ContentType/LoyaltyPage/index.tsx  |  2 +-
 components/ContentType/StaticPages/index.tsx  |  2 +-
 .../Sidebar/SidebarNavigationSkeleton.tsx     | 57 +++++++++++++++++++
 .../MyPages/Sidebar/SidebarSkeleton.tsx       | 13 -----
 components/Sidebar/MyPagesNavigation.tsx      | 10 +++-
 components/Sidebar/SidebarSkeleton.tsx        | 11 ++++
 7 files changed, 81 insertions(+), 18 deletions(-)
 create mode 100644 components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx
 delete mode 100644 components/MyPages/Sidebar/SidebarSkeleton.tsx
 create mode 100644 components/Sidebar/SidebarSkeleton.tsx

diff --git a/app/[lang]/(live)/(protected)/my-pages/layout.tsx b/app/[lang]/(live)/(protected)/my-pages/layout.tsx
index f17200169..9d36dd8a5 100644
--- a/app/[lang]/(live)/(protected)/my-pages/layout.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/layout.tsx
@@ -1,7 +1,7 @@
 import { Suspense } from "react"
 
 import Sidebar from "@/components/MyPages/Sidebar"
-import SidebarSkeleton from "@/components/MyPages/Sidebar/SidebarSkeleton"
+import SidebarNavigationSkeleton from "@/components/MyPages/Sidebar/SidebarNavigationSkeleton"
 import Surprises from "@/components/MyPages/Surprises"
 
 import styles from "./layout.module.css"
@@ -17,7 +17,7 @@ export default async function MyPagesLayout({
       <section className={styles.layout}>
         {breadcrumbs}
         <section className={styles.content}>
-          <Suspense fallback={<SidebarSkeleton />}>
+          <Suspense fallback={<SidebarNavigationSkeleton />}>
             <Sidebar />
           </Suspense>
           {children}
diff --git a/components/ContentType/LoyaltyPage/index.tsx b/components/ContentType/LoyaltyPage/index.tsx
index edfba39ff..efd063138 100644
--- a/components/ContentType/LoyaltyPage/index.tsx
+++ b/components/ContentType/LoyaltyPage/index.tsx
@@ -5,8 +5,8 @@ import { serverClient } from "@/lib/trpc/server"
 import Blocks from "@/components/Blocks"
 import Hero from "@/components/Hero"
 import MaxWidth from "@/components/MaxWidth"
-import SidebarSkeleton from "@/components/MyPages/Sidebar/SidebarSkeleton"
 import Sidebar from "@/components/Sidebar"
+import SidebarSkeleton from "@/components/Sidebar/SidebarSkeleton"
 import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
diff --git a/components/ContentType/StaticPages/index.tsx b/components/ContentType/StaticPages/index.tsx
index 6b25bad66..dc59a1046 100644
--- a/components/ContentType/StaticPages/index.tsx
+++ b/components/ContentType/StaticPages/index.tsx
@@ -2,8 +2,8 @@ import { Suspense } from "react"
 
 import Blocks from "@/components/Blocks"
 import Hero from "@/components/Hero"
-import SidebarSkeleton from "@/components/MyPages/Sidebar/SidebarSkeleton"
 import Sidebar from "@/components/Sidebar"
+import SidebarSkeleton from "@/components/Sidebar/SidebarSkeleton"
 import LinkChips from "@/components/TempDesignSystem/LinkChips"
 import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
diff --git a/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx b/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx
new file mode 100644
index 000000000..28d38e200
--- /dev/null
+++ b/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx
@@ -0,0 +1,57 @@
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./sidebar.module.css"
+
+export default function SidebarNavigationSkeleton() {
+  return (
+    <aside className={styles.sidebar}>
+      <nav className={styles.nav}>
+        <Subtitle type="two" color="baseTextHighContrast">
+          <SkeletonShimmer width={"10ch"} />
+        </Subtitle>
+        <Divider color="beige" />
+        <ul className={styles.list}>
+          <li>
+            <Link href="" size={"regular"} variant="sidebar">
+              <SkeletonShimmer width={"8ch"} />
+            </Link>
+          </li>
+          <li>
+            <Link href="" size={"regular"} variant="sidebar">
+              <SkeletonShimmer width={"10ch"} />
+            </Link>
+          </li>
+          <li>
+            <Link href="" size={"regular"} variant="sidebar">
+              <SkeletonShimmer width={"9ch"} />
+            </Link>
+          </li>
+          <li>
+            <Link href="" size={"regular"} variant="sidebar">
+              <SkeletonShimmer width={"12ch"} />
+            </Link>
+          </li>
+          <Divider color="beige" />
+          <li>
+            <Link href="" size={"regular"} variant="sidebar">
+              <SkeletonShimmer width={"24ch"} />
+            </Link>
+          </li>
+          <li>
+            <Link href="" size={"regular"} variant="sidebar">
+              <SkeletonShimmer width={"10ch"} />
+            </Link>
+          </li>
+          <li>
+            <Link href="" size={"regular"} variant="sidebar">
+              <SkeletonShimmer width={"8ch"} />
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </aside>
+  )
+}
diff --git a/components/MyPages/Sidebar/SidebarSkeleton.tsx b/components/MyPages/Sidebar/SidebarSkeleton.tsx
deleted file mode 100644
index 52d95ea7e..000000000
--- a/components/MyPages/Sidebar/SidebarSkeleton.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import SkeletonShimmer from "@/components/SkeletonShimmer"
-
-import styles from "./sidebar.module.css"
-
-export default function SidebarSkeleton() {
-  return (
-    <aside className={styles.sidebar}>
-      <nav className={styles.nav}>
-        <SkeletonShimmer width={"100%"} height="500px" />
-      </nav>
-    </aside>
-  )
-}
diff --git a/components/Sidebar/MyPagesNavigation.tsx b/components/Sidebar/MyPagesNavigation.tsx
index 9f1bc3cec..722cbc7d7 100644
--- a/components/Sidebar/MyPagesNavigation.tsx
+++ b/components/Sidebar/MyPagesNavigation.tsx
@@ -1,7 +1,11 @@
+import { Suspense } from "react"
+
 import { getName } from "@/lib/trpc/memoizedRequests"
 
 import MyPagesSidebar from "@/components/MyPages/Sidebar"
 
+import SidebarNavigationSkeleton from "../MyPages/Sidebar/SidebarNavigationSkeleton"
+
 export default async function MyPagesNavigation() {
   const user = await getName()
 
@@ -9,5 +13,9 @@ export default async function MyPagesNavigation() {
   if (!user) {
     return null
   }
-  return <MyPagesSidebar />
+  return (
+    <Suspense fallback={<SidebarNavigationSkeleton />}>
+      <MyPagesSidebar />
+    </Suspense>
+  )
 }
diff --git a/components/Sidebar/SidebarSkeleton.tsx b/components/Sidebar/SidebarSkeleton.tsx
new file mode 100644
index 000000000..26b6df296
--- /dev/null
+++ b/components/Sidebar/SidebarSkeleton.tsx
@@ -0,0 +1,11 @@
+import SkeletonShimmer from "../SkeletonShimmer"
+
+import styles from "./sidebar.module.css"
+
+export default function SidebarSkeleton() {
+  return (
+    <aside className={styles.aside}>
+      <SkeletonShimmer width="100%" height="500px" />
+    </aside>
+  )
+}