feat/sidebar-skeleton: added sidebar skeleton

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}

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}>

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>

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>
+  )
+}