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