perf(studio): load import organization tools on demand

src/app/admin/studio/studio-layout-client.tsx

@@ -7,7 +7,6 @@ import {
 	ClipboardCheck,
 	Copy,
 	Dumbbell,
-	FolderTree,
 	Image as ImageIcon,
 	type LucideIcon,
 	Puzzle,
@@ -19,7 +18,7 @@ import {
 import { usePathname } from "next/navigation";
 import { useState } from "react";
 import { CatalogManagerDialog } from "@/app/admin/catalog/catalog-manager-dialog-wrapper";
-import { OrganizeImportsDialog } from "@/components/admin/studio/organize-imports-dialog";
+import { OrganizeImportsLauncher } from "@/components/admin/studio/organize-imports-launcher";
 import Link from "@/components/link";
 import {
 	Popover,
@@ -115,7 +114,6 @@ export function StudioLayoutClient({
 	children: React.ReactNode;
 }) {
 	const pathname = usePathname() ?? "";
-	const [organizeOpen, setOrganizeOpen] = useState(false);
 	return (
 		<div className="flex h-[calc(100dvh-7rem)] min-h-[600px] min-w-0 flex-col overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-canvas)] text-[var(--admin-text)]">
 			<nav
@@ -153,14 +151,7 @@ export function StudioLayoutClient({
 								canEdit
 								triggerLabel="Catalog manager"
 							/>
-							<button
-								type="button"
-								onClick={() => setOrganizeOpen(true)}
-								className="flex min-h-10 items-center gap-2 rounded-lg px-3 text-sm font-medium text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10"
-							>
-								<FolderTree size={16} />
-								Organize imports
-							</button>
+							<OrganizeImportsLauncher />
 						</>
 					)}
 					<StudioMenu
@@ -176,12 +167,6 @@ export function StudioLayoutClient({
 				</div>
 			</nav>
 			<div className="min-h-0 min-w-0 flex-1 overflow-auto">{children}</div>
-			{canEditCatalog && (
-				<OrganizeImportsDialog
-					open={organizeOpen}
-					onOpenChange={setOrganizeOpen}
-				/>
-			)}
 		</div>
 	);
 }

src/components/admin/studio/organize-imports-launcher.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { FolderTree } from "lucide-react";
+import { lazy, Suspense, useState } from "react";
+import { StudioPanelLoading } from "./studio-panel-loading";
+
+const OrganizeImportsDialog = lazy(() =>
+	import("./organize-imports-dialog").then((module) => ({
+		default: module.OrganizeImportsDialog,
+	})),
+);
+
+export function OrganizeImportsLauncher() {
+	const [open, setOpen] = useState(false);
+	const [requested, setRequested] = useState(false);
+	return (
+		<>
+			<button
+				type="button"
+				onClick={() => {
+					setRequested(true);
+					setOpen(true);
+				}}
+				className="flex min-h-10 items-center gap-2 rounded-lg px-3 text-sm font-medium text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10"
+			>
+				<FolderTree size={16} />
+				Organize imports
+			</button>
+			{requested && (
+				<Suspense
+					fallback={
+						open ? <StudioPanelLoading onClose={() => setOpen(false)} /> : null
+					}
+				>
+					<OrganizeImportsDialog open={open} onOpenChange={setOpen} />
+				</Suspense>
+			)}
+		</>
+	);
+}

src/lib/studio-bundle.test.ts

@@ -2,8 +2,7 @@ import path from "node:path";
 import { build } from "esbuild";
 import { expect, it } from "vitest";
 
-it("keeps scale preview and generation outside the initial Nitro editor bundle", async () => {
-	const entry = "src/app/admin/import/furni/nitro-editor-dialog.tsx";
+async function bundleInputs(entry: string) {
 	const result = await build({
 		entryPoints: [entry],
 		bundle: true,
@@ -14,6 +13,17 @@ it("keeps scale preview and generation outside the initial Nitro editor bundle",
 		metafile: true,
 		packages: "external",
 		alias: { "@": path.resolve("src") },
+		plugins: [
+			{
+				name: "server-action-boundary",
+				setup(builder) {
+					builder.onResolve({ filter: /^@\/actions\// }, ({ path }) => ({
+						path,
+						external: true,
+					}));
+				},
+			},
+		],
 	});
 	const outputs = result.metafile.outputs;
 	const start = Object.keys(outputs).find(
@@ -34,13 +44,30 @@ it("keeps scale preview and generation outside the initial Nitro editor bundle",
 	const initialInputs = new Set(
 		[...seen].flatMap((key) => Object.keys(outputs[key].inputs)),
 	);
+	return { initialInputs, inputs: Object.keys(result.metafile.inputs) };
+}
+
+it("keeps scale preview and generation outside the initial Nitro editor bundle", async () => {
+	const { initialInputs, inputs } = await bundleInputs(
+		"src/app/admin/import/furni/nitro-editor-dialog.tsx",
+	);
 	for (const name of [
 		"nitro-quality-panel.tsx",
 		"nitro-scale32-generator.tsx",
 	]) {
-		expect(
-			Object.keys(result.metafile.inputs).some((input) => input.endsWith(name)),
-		).toBe(true);
+		expect(inputs.some((input) => input.endsWith(name))).toBe(true);
+		expect([...initialInputs].some((input) => input.endsWith(name))).toBe(
+			false,
+		);
+	}
+}, 30_000);
+
+it("loads import organization and its icon picker only when requested in Studio", async () => {
+	const { initialInputs, inputs } = await bundleInputs(
+		"src/app/admin/studio/studio-layout-client.tsx",
+	);
+	for (const name of ["organize-imports-dialog.tsx", "icon-picker.tsx"]) {
+		expect(inputs.some((input) => input.endsWith(name))).toBe(true);
 		expect([...initialInputs].some((input) => input.endsWith(name))).toBe(
 			false,
 		);