Splitted sidebar skeletons

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}

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"

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"

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

components/MyPages/Sidebar/SidebarSkeleton.tsx

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

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

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