perf(studio): defer import history and Nitro scale tools until opened

src/app/admin/import/furni/nitro-editor-dialog.tsx

@@ -16,10 +16,10 @@ import {
 	Save,
 	Sparkles,
 } from "lucide-react";
-import { useEffect, useEffectEvent, useState } from "react";
+import { useTranslations } from "next-intl";
+import { lazy, Suspense, useEffect, useEffectEvent, useState } from "react";
 import { toast } from "sonner";
-import { NitroQualityPanel } from "@/components/admin/studio/nitro-quality-panel";
-import { NitroScale32Generator } from "@/components/admin/studio/nitro-scale32-generator";
+
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -41,6 +41,17 @@ import {
 	nitroAnimationStatesCount,
 } from "@/lib/furni/auto-interaction";
 
+const NitroQualityPanel = lazy(() =>
+	import("@/components/admin/studio/nitro-quality-panel").then((module) => ({
+		default: module.NitroQualityPanel,
+	})),
+);
+const NitroScale32Generator = lazy(() =>
+	import("@/components/admin/studio/nitro-scale32-generator").then(
+		(module) => ({ default: module.NitroScale32Generator }),
+	),
+);
+
 interface NitroEditorDialogProps {
 	classname: string;
 	name?: string;
@@ -135,6 +146,7 @@ export function NitroEditorDialog({
 	open,
 	onOpenChange,
 }: NitroEditorDialogProps) {
+	const loadingT = useTranslations("pages.admin.housekeeping");
 	const [metadata, setMetadata] = useState<NitroMetadata | null>(null);
 	const [originalMetadata, setOriginalMetadata] =
 		useState<NitroMetadata | null>(null);
@@ -448,19 +460,21 @@ export function NitroEditorDialog({
 							value="quality"
 							className="min-h-0 overflow-y-auto flex-1 px-4 sm:px-6 py-4"
 						>
-							<NitroScale32Generator
-								classname={classname}
-								disabled={hasChanges || saving}
-								onChanged={(updated) => {
-									setBundleRevision((value) => value + 1);
-									setMetadata(updated as NitroMetadata);
-									setOriginalMetadata(
-										structuredClone(updated) as NitroMetadata,
-									);
-									setJsonText(JSON.stringify(updated, null, 2));
-								}}
-							/>
-							<NitroQualityPanel key={bundleRevision} classname={classname} />
+							<Suspense fallback={<p role="status">{loadingT("loading")}</p>}>
+								<NitroScale32Generator
+									classname={classname}
+									disabled={hasChanges || saving}
+									onChanged={(updated) => {
+										setBundleRevision((value) => value + 1);
+										setMetadata(updated as NitroMetadata);
+										setOriginalMetadata(
+											structuredClone(updated) as NitroMetadata,
+										);
+										setJsonText(JSON.stringify(updated, null, 2));
+									}}
+								/>
+								<NitroQualityPanel key={bundleRevision} classname={classname} />
+							</Suspense>
 						</TabsContent>
 						{/* ── Visual Tab ── */}
 						<TabsContent