optimized the server side slow issues from vercel speed insights

Author: ZakirCodeArchitect

app/docs/[[...slug]]/DocsContentSkeleton.tsx

@@ -0,0 +1,11 @@
+/** Main-column fallback while docs page data (content + permissions) resolves. */
+export function DocsContentSkeleton() {
+  return (
+    <div className="flex flex-1 flex-col gap-4 p-6">
+      <div className="h-8 w-1/3 max-w-xs animate-pulse rounded-md bg-gray-100" />
+      <div className="h-4 w-full max-w-2xl animate-pulse rounded-md bg-gray-50" />
+      <div className="h-4 w-5/6 max-w-xl animate-pulse rounded-md bg-gray-50" />
+      <div className="mt-6 min-h-[50vh] w-full animate-pulse rounded-lg bg-gray-50" />
+    </div>
+  );
+}

app/docs/[[...slug]]/DocsLayoutWithNav.tsx

@@ -0,0 +1,54 @@
+import {
+  processProjects,
+  processYourDocs,
+  processPublishedDocs,
+  buildSidebarItems,
+  type ProcessedYourDoc,
+} from '@/lib/docs';
+import { getDocsNavBundleForUser } from '@/lib/db';
+import { DocsLayoutClient } from '@/components/docs/DocsLayoutClient';
+import { FontLoader } from '@/components/FontLoader';
+
+export async function DocsLayoutWithNav({
+  userId,
+  children,
+}: {
+  userId: string;
+  children: React.ReactNode;
+}) {
+  const { data, publishedDocsData } = await getDocsNavBundleForUser(userId);
+  const processedProjects = processProjects(data.projects);
+  const processedYourDocs = processYourDocs(data.yourDocs);
+
+  let processedPublishedDocs: ProcessedYourDoc[] = [];
+  try {
+    const publishSlugsMap = new Map(Object.entries(publishedDocsData.publishSlugs));
+    processedPublishedDocs = processPublishedDocs(
+      publishedDocsData.documents,
+      publishSlugsMap
+    );
+  } catch (error) {
+    console.error('Error fetching published docs:', error);
+    processedPublishedDocs = [];
+  }
+
+  const sidebarItems = buildSidebarItems(
+    processedProjects,
+    processedYourDocs,
+    processedPublishedDocs,
+    data.ownership
+  );
+
+  return (
+    <>
+      <FontLoader />
+      <DocsLayoutClient
+        sidebarItems={sidebarItems}
+        processedProjects={processedProjects}
+        processedYourDocs={processedYourDocs}
+      >
+        {children}
+      </DocsLayoutClient>
+    </>
+  );
+}