Splitted sidebar skeletons

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