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

app/form/layout.tsx

@@ -7,8 +7,10 @@ import { getSessionDiscordId } from "@/lib/auth/auth";
 import { getDiscordMemberProfile } from "@/lib/discord/discord";
 import Link from 'next/link';
 import { getAdminDiscordIds } from "@/lib/auth/auth";
+import { PageProgress } from "@/components/page-progress";
+import { config } from "@/lib/config";
 
-const siteUrl = process.env.BASE_URL;
+const siteUrl = config.site.url;
 
 export const metadata: Metadata = {
   title: "กรอกแบบฟอร์ม",
@@ -47,6 +49,7 @@ export default async function FormLayout({
 
   return (
     <div className="relative flex min-h-screen w-full flex-1 flex-col overflow-x-hidden bg-background text-foreground">
+      <PageProgress />
       <header className="relative z-10 flex shrink-0 items-center justify-between border-b border-border bg-background/90 px-6 py-3 backdrop-blur">
         <Link href="/form">
           <span className="font-semibold text-sm">

app/layout.tsx

@@ -58,7 +58,6 @@ export const metadata: Metadata = {
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Toaster } from "sonner";
 import { ThemeProvider } from "@/components/theme-provider";
-import { PageProgress } from "@/components/page-progress";
 
 export default function RootLayout({
   children,
@@ -72,7 +71,6 @@ export default function RootLayout({
       suppressHydrationWarning
     >
       <body className="font-sans" suppressHydrationWarning>
-        <PageProgress />
         <ThemeProvider
           attribute="class"
           defaultTheme="system"