perf(studio): defer optional panels and trim validator imports

src/components/admin/studio/studio-client.tsx

@@ -22,10 +22,17 @@ import {
 	Trash2,
 	X,
 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+	lazy,
+	Suspense,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
 import { toast } from "sonner";
 import { deleteImportedFurni } from "@/actions/import-furni";
-import { NitroEditorDialog } from "@/app/admin/import/furni/nitro-editor-dialog";
 import { useConfirmDialog } from "@/components/admin/confirm-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -59,15 +66,14 @@ import type { TreeNode } from "@/types/catalog";
 import { BatchProgress } from "./batch-progress";
 import { CatalogRail } from "./catalog-rail";
 import { CheckboxDot } from "./checkbox-dot";
-import { FurnitureDetailDrawer } from "./furniture-detail-drawer";
 import { FurnitureJobHistory } from "./furniture-jobs";
-import { ImportReview } from "./import-review";
 import { filterFurniture } from "./studio-filters";
 import {
 	getFurniImageUrl,
 	handleImgError,
 	TYPE_LABELS,
 } from "./studio-furni-icons";
+import { StudioPanelLoading } from "./studio-panel-loading";
 import type {
 	BatchItemStatus,
 	FurniItem,
@@ -78,6 +84,22 @@ import type {
 import { useFurnitureJobs } from "./use-furniture-jobs";
 import { useStudioTranslations } from "./use-studio-translations";
 
+const NitroEditorDialog = lazy(() =>
+	import("@/app/admin/import/furni/nitro-editor-dialog").then((module) => ({
+		default: module.NitroEditorDialog,
+	})),
+);
+const FurnitureDetailDrawer = lazy(() =>
+	import("./furniture-detail-drawer").then((module) => ({
+		default: module.FurnitureDetailDrawer,
+	})),
+);
+const ImportReview = lazy(() =>
+	import("./import-review").then((module) => ({
+		default: module.ImportReview,
+	})),
+);
+
 export function StudioClient({
 	source,
 	initialTree,
@@ -1917,83 +1939,101 @@ export function StudioClient({
 
 				{/* ── Detail drawer ─────────────────────────────── */}
 				{detail ? (
-					<FurnitureDetailDrawer
-						detail={detail}
-						importingId={importingId}
-						regenerating={regeneratingNitro.has(detail.classname)}
-						inspectionKey={`${detail.classname}-${detail.alreadyImported}-${jobs.jobs
-							.filter(
-								(j) =>
-									j.state === "completed" ||
-									j.state === "cancelled" ||
-									j.state === "interrupted",
-							)
-							.map((j) => j.id)
-							.join(",")}`}
-						busy={
-							jobs.busy ||
-							jobs.jobs.some(
-								(j) =>
-									(j.state === "queued" || j.state === "running") &&
-									j.items.some((i) => i.classname === detail.classname),
-							)
+					<Suspense
+						fallback={
+							<StudioPanelLoading drawer onClose={() => setDetail(null)} />
 						}
-						onClose={() => setDetail(null)}
-						onImport={() => setReview({ items: [detail], single: true })}
-						onEdit={() => setEditingClassname(detail.classname)}
-						onRegenerate={() => void regenNitro(detail)}
-						onDelete={() => {
-							setDeleting(detail.classname);
-							setConfirmDelete(true);
-						}}
-						onRepair={() =>
-							jobs.submit([detail], {
-								sourceId: activeSource || undefined,
-								translate: false,
-								mode: "repair",
-							})
-						}
-					/>
+					>
+						<FurnitureDetailDrawer
+							detail={detail}
+							importingId={importingId}
+							regenerating={regeneratingNitro.has(detail.classname)}
+							inspectionKey={`${detail.classname}-${detail.alreadyImported}-${jobs.jobs
+								.filter(
+									(j) =>
+										j.state === "completed" ||
+										j.state === "cancelled" ||
+										j.state === "interrupted",
+								)
+								.map((j) => j.id)
+								.join(",")}`}
+							busy={
+								jobs.busy ||
+								jobs.jobs.some(
+									(j) =>
+										(j.state === "queued" || j.state === "running") &&
+										j.items.some((i) => i.classname === detail.classname),
+								)
+							}
+							onClose={() => setDetail(null)}
+							onImport={() => setReview({ items: [detail], single: true })}
+							onEdit={() => setEditingClassname(detail.classname)}
+							onRegenerate={() => void regenNitro(detail)}
+							onDelete={() => {
+								setDeleting(detail.classname);
+								setConfirmDelete(true);
+							}}
+							onRepair={() =>
+								jobs.submit([detail], {
+									sourceId: activeSource || undefined,
+									translate: false,
+									mode: "repair",
+								})
+							}
+						/>
+					</Suspense>
 				) : null}
 			</div>
 
 			{review && (
-				<ImportReview
-					items={review.items}
-					sourceId={activeSource || undefined}
-					source={
-						sources.find((entry) => entry.id === activeSource)?.name ??
-						source.label
-					}
-					translation={
-						translate
-							? translateLangs.length
-								? translateLangs.join(", ")
-								: "Default languages"
-							: "Off"
-					}
-					onCancel={() => setReview(null)}
-					busy={jobs.busy}
-					onConfirm={async (accepted) => {
-						if (
-							await jobs.submit(accepted, {
-								sourceId: activeSource || undefined,
-								translate,
-								langs: translateLangs.length ? translateLangs : undefined,
-							})
-						) {
-							setReview(null);
-							setSelected(new Set());
+				<Suspense
+					fallback={<StudioPanelLoading onClose={() => setReview(null)} />}
+				>
+					<ImportReview
+						items={review.items}
+						sourceId={activeSource || undefined}
+						source={
+							sources.find((entry) => entry.id === activeSource)?.name ??
+							source.label
 						}
-					}}
-				/>
+						translation={
+							translate
+								? translateLangs.length
+									? translateLangs.join(", ")
+									: "Default languages"
+								: "Off"
+						}
+						onCancel={() => setReview(null)}
+						busy={jobs.busy}
+						onConfirm={async (accepted) => {
+							if (
+								await jobs.submit(accepted, {
+									sourceId: activeSource || undefined,
+									translate,
+									langs: translateLangs.length ? translateLangs : undefined,
+								})
+							) {
+								setReview(null);
+								setSelected(new Set());
+							}
+						}}
+					/>
+				</Suspense>
+			)}
+			{editingClassname !== null && (
+				<Suspense
+					fallback={
+						<StudioPanelLoading onClose={() => setEditingClassname(null)} />
+					}
+				>
+					<NitroEditorDialog
+						classname={editingClassname ?? ""}
+						name={detail?.name ?? ""}
+						open={editingClassname !== null}
+						onOpenChange={(open) => !open && setEditingClassname(null)}
+					/>
+				</Suspense>
 			)}
-			<NitroEditorDialog
-				classname={editingClassname ?? ""}
-				name={detail?.name ?? ""}
-				open={editingClassname !== null}
-				onOpenChange={(open) => !open && setEditingClassname(null)}
-			/>
 
 			{confirmDialog}