perf(admin): lazy-load response navigation

app/admin/form/[id]/layout.tsx

@@ -7,7 +7,7 @@ import { getSessionDiscordId } from "@/lib/auth/auth";
 import { getDiscordMemberProfile } from "@/lib/discord/discord";
 import { db } from "@/db";
 import { submissions } from "@/db/schema";
-import { asc, eq } from "drizzle-orm";
+import { count, eq } from "drizzle-orm";
 import { notFound } from "next/navigation";
 import { isFormAcceptingSubmissions } from "@/lib/form/form-availability";
 
@@ -25,43 +25,21 @@ export default async function AdminFormLayout(
   }
 ) {
   const params = await props.params;
-  const [session, form] = await Promise.all([
+  const [session, form, [{ responseCount }]] = await Promise.all([
     getServerSession(authOptions),
     db.query.forms.findFirst({
       where: (record, { eq }) => eq(record.id, params.id),
     }),
+    db
+      .select({ responseCount: count() })
+      .from(submissions)
+      .where(eq(submissions.formId, params.id)),
   ]);
 
   if (!form) {
     notFound();
   }
 
-  const responseItems = await db
-    .select({
-      id: submissions.id,
-      userName: submissions.userName,
-      userDiscordId: submissions.userDiscordId,
-    })
-    .from(submissions)
-    .where(eq(submissions.formId, params.id))
-    .orderBy(asc(submissions.submittedAt), asc(submissions.id));
-
-  const responseDiscordIds = [
-    ...new Set(
-      responseItems
-        .map((response) => response.userDiscordId)
-        .filter((value): value is string => Boolean(value))
-    ),
-  ];
-  const responseProfiles = Object.fromEntries(
-    await Promise.all(
-      responseDiscordIds.map(async (discordId) => [
-        discordId,
-        await getDiscordMemberProfile(discordId),
-      ])
-    )
-  );
-  
   let profile = null;
   const discordId = getSessionDiscordId(session);
   if (discordId) {
@@ -74,18 +52,7 @@ export default async function AdminFormLayout(
         <FormAdminSidebar
           formId={params.id}
           formTitle={form.title}
-          responseItems={responseItems.map((response, index) => ({
-            id: response.id,
-            displayName:
-              (response.userDiscordId
-                ? responseProfiles[response.userDiscordId]?.globalName ||
-                  responseProfiles[response.userDiscordId]?.username
-                : null) ||
-              response.userName ||
-              response.userDiscordId ||
-              "Anonymous",
-            queueNumber: index + 1,
-          }))}
+          responseCount={responseCount}
           isOpen={isFormAcceptingSubmissions(form)}
           userName={session?.user?.name || ""}
           userImage={session?.user?.image || ""}