From daa677d60544eeadb3b3130d0e2037488b91c0c7 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Tue, 17 Dec 2024 07:17:30 +0100
Subject: [PATCH] feat/sidebar-skeleton: added sidebar skeleton

---
 app/[lang]/(live)/(protected)/my-pages/layout.tsx |  4 ++--
 components/ContentType/LoyaltyPage/index.tsx      |  5 ++++-
 components/ContentType/StaticPages/index.tsx      |  5 ++++-
 components/MyPages/Sidebar/SidebarSkeleton.tsx    | 13 +++++++++++++
 4 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 components/MyPages/Sidebar/SidebarSkeleton.tsx

diff --git a/app/[lang]/(live)/(protected)/my-pages/layout.tsx b/app/[lang]/(live)/(protected)/my-pages/layout.tsx
index 80a038b9a..f17200169 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 LoadingSpinner from "@/components/LoadingSpinner"
 import Sidebar from "@/components/MyPages/Sidebar"
+import SidebarSkeleton from "@/components/MyPages/Sidebar/SidebarSkeleton"
 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={<LoadingSpinner />}>
+          <Suspense fallback={<SidebarSkeleton />}>
             <Sidebar />
           </Suspense>
           {children}
diff --git a/components/ContentType/LoyaltyPage/index.tsx b/components/ContentType/LoyaltyPage/index.tsx
index fb302ea39..edfba39ff 100644
--- a/components/ContentType/LoyaltyPage/index.tsx
+++ b/components/ContentType/LoyaltyPage/index.tsx
@@ -5,6 +5,7 @@ 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 Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
@@ -25,7 +26,9 @@ export default async function LoyaltyPage() {
     <>
       <section className={styles.content}>
         {loyaltyPage.sidebar?.length ? (
-          <Sidebar blocks={loyaltyPage.sidebar} />
+          <Suspense fallback={<SidebarSkeleton />}>
+            <Sidebar blocks={loyaltyPage.sidebar} />
+          </Suspense>
         ) : null}
 
         <MaxWidth className={styles.blocks}>
diff --git a/components/ContentType/StaticPages/index.tsx b/components/ContentType/StaticPages/index.tsx
index 822f095ad..6b25bad66 100644
--- a/components/ContentType/StaticPages/index.tsx
+++ b/components/ContentType/StaticPages/index.tsx
@@ -2,6 +2,7 @@ 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 LinkChips from "@/components/TempDesignSystem/LinkChips"
 import Preamble from "@/components/TempDesignSystem/Text/Preamble"
@@ -56,7 +57,9 @@ export default function StaticPage({
           </main>
 
           {"sidebar" in content && content.sidebar?.length ? (
-            <Sidebar blocks={content.sidebar} />
+            <Suspense fallback={<SidebarSkeleton />}>
+              <Sidebar blocks={content.sidebar} />
+            </Suspense>
           ) : null}
         </div>
       </section>
diff --git a/components/MyPages/Sidebar/SidebarSkeleton.tsx b/components/MyPages/Sidebar/SidebarSkeleton.tsx
new file mode 100644
index 000000000..52d95ea7e
--- /dev/null
+++ b/components/MyPages/Sidebar/SidebarSkeleton.tsx
@@ -0,0 +1,13 @@
+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>
+  )
+}