perf(ui): defer editor and navigation effects

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

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState, useRef, useCallback, useEffect } from "react";
+import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -22,7 +23,6 @@ import { Plus, Trash, ArrowUp, ArrowDown, Loader2, Image as ImageIcon, X } from
 import Image from 'next/image';
 import { format, parseISO } from "date-fns";
 import { DateTimePicker } from "@/components/date-time-picker";
-import { RichTextEditor } from "@/components/rich-text-editor";
 import { getErrorMessage } from "@/lib/utils";
 import {
   Accordion,
@@ -78,6 +78,19 @@ import {
   SortableQuestion,
 } from "@/components/admin-form-editor-parts";
 
+const RichTextEditor = dynamic(
+  () =>
+    import("@/components/rich-text-editor").then(
+      (module) => module.RichTextEditor,
+    ),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="h-32 animate-pulse rounded-md border bg-muted/40" />
+    ),
+  },
+);
+
 interface Question {
   id: string;
   formId: string;

app/admin/layout.tsx

@@ -2,6 +2,7 @@ import { getServerSession } from "next-auth";
 import { authOptions } from "@/lib/auth/auth-options";
 import { redirect } from "next/navigation";
 import { getAdminDiscordIds, getSessionDiscordId } from "@/lib/auth/auth";
+import { PageProgress } from "@/components/page-progress";
 
 export default async function AdminLayout({
   children,
@@ -15,5 +16,10 @@ export default async function AdminLayout({
     redirect("/");
   }
 
-  return <>{children}</>;
+  return (
+    <>
+      <PageProgress />
+      {children}
+    </>
+  );
 }