perf(admin): lazy-load response navigation

app/admin/form/[id]/result/[submissionId]/page.tsx

@@ -7,6 +7,8 @@ import SubmissionDetailClient from "./client";
 import { DeleteSubmissionButton } from "@/components/delete-buttons";
 import { RealtimeRefresh } from "@/components/realtime-refresh";
 import { getDiscordMemberProfile } from "@/lib/discord/discord";
+import { submissions } from "@/db/schema";
+import { and, asc, desc, eq, gt, lt, or } from "drizzle-orm";
 
 interface SubmissionDetailPageProps {
   params: Promise<{
@@ -39,18 +41,53 @@ export default async function SubmissionDetailPage({
     notFound();
   }
 
-  const respondentProfile = submission.userDiscordId
-    ? await getDiscordMemberProfile(submission.userDiscordId)
-    : null;
-
-  const questions = await db.query.questions.findMany({
-    where: (q, { eq }) => eq(q.formId, submission.formId),
-    orderBy: (q, { asc }) => [asc(q.displayOrder)],
-  });
-
-  const answersList = await db.query.answers.findMany({
-    where: (a, { eq }) => eq(a.submissionId, submission.id),
-  });
+  const [respondentProfile, questions, answersList, [previous], [next]] =
+    await Promise.all([
+      submission.userDiscordId
+        ? getDiscordMemberProfile(submission.userDiscordId)
+        : null,
+      db.query.questions.findMany({
+        where: (q, { eq }) => eq(q.formId, submission.formId),
+        orderBy: (q, { asc }) => [asc(q.displayOrder)],
+      }),
+      db.query.answers.findMany({
+        where: (a, { eq }) => eq(a.submissionId, submission.id),
+      }),
+      db
+        .select({ id: submissions.id })
+        .from(submissions)
+        .where(
+          and(
+            eq(submissions.formId, formId),
+            or(
+              gt(submissions.submittedAt, submission.submittedAt),
+              and(
+                eq(submissions.submittedAt, submission.submittedAt),
+                gt(submissions.id, submission.id),
+              ),
+            ),
+          ),
+        )
+        .orderBy(asc(submissions.submittedAt), asc(submissions.id))
+        .limit(1),
+      db
+        .select({ id: submissions.id })
+        .from(submissions)
+        .where(
+          and(
+            eq(submissions.formId, formId),
+            or(
+              lt(submissions.submittedAt, submission.submittedAt),
+              and(
+                eq(submissions.submittedAt, submission.submittedAt),
+                lt(submissions.id, submission.id),
+              ),
+            ),
+          ),
+        )
+        .orderBy(desc(submissions.submittedAt), desc(submissions.id))
+        .limit(1),
+    ]);
 
   const answersMap: Record<string, { value: string; imageCdnId: string | null }> = {};
   for (const ans of answersList) {
@@ -59,14 +96,8 @@ export default async function SubmissionDetailPage({
       imageCdnId: ans.imageCdnId ?? null,
     };
   }
-  const submissionsList = await db.query.submissions.findMany({
-    where: (s, { eq }) => eq(s.formId, formId),
-    orderBy: (s, { desc }) => [desc(s.submittedAt)],
-  });
-
-  const currentIndex = submissionsList.findIndex((s) => s.id === submissionId);
-  const prevId = currentIndex > 0 ? submissionsList[currentIndex - 1].id : null;
-  const nextId = currentIndex >= 0 && currentIndex < submissionsList.length - 1 ? submissionsList[currentIndex + 1].id : null;
+  const prevId = previous?.id ?? null;
+  const nextId = next?.id ?? null;
 
   return (
     <div className="space-y-6 w-full max-w-6xl mx-auto p-4 md:p-6 pb-10">