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

e2e/ui/fixture-server.mjs

@@ -15,6 +15,7 @@ const port = Number(process.env.UI_TEST_PORT || 3107);
 if (!Number.isInteger(port) || port < 1024 || port > 65535)
 	throw Error("Invalid UI_TEST_PORT");
 const actions = new Set([
+	"@/actions/import-furni",
 	"@/actions/events",
 	"@/actions/admin-settings",
 	"@/actions/admin-table-views",
@@ -197,6 +198,7 @@ const server = createServer(async (req, res) => {
 		if (
 			[
 				"/admin/attachment-harness",
+				"/admin/studio-harness",
 				"/admin/jobs-harness",
 				"/admin/settings",
 				"/admin/articles/new",

e2e/ui/fixtures/entry.tsx

@@ -7,7 +7,9 @@ import { CmsSettingsForm } from "@/app/admin/settings/cms-settings-form";
 import { TicketsTable } from "@/app/admin/tickets/tickets-table";
 import { ArticleForm } from "@/components/admin/article-form";
 import { FurnitureSyncQueue } from "@/components/admin/studio/furniture-sync-queue";
+import { StudioClient } from "@/components/admin/studio/studio-client";
 import type { ArticleSaveResult } from "@/lib/article-input";
+import { buildFurniImportSource } from "@/lib/habbo-gamedata-hotel";
 import { themePaletteCss } from "@/lib/theme-css";
 import { PRESETS } from "@/lib/theme-presets";
 import messages from "@/messages/en.json";
@@ -103,7 +105,13 @@ createRoot(root).render(
 							? "News editor"
 							: "Furniture synchronization"}
 			</h1>
-			{route.includes("attachment-harness") ? (
+			{route.includes("studio-harness") ? (
+				<StudioClient
+					source={buildFurniImportSource("it")}
+					initialTree={[]}
+					defaultTranslate={false}
+				/>
+			) : route.includes("attachment-harness") ? (
 				<AttachmentHarness />
 			) : route.includes("events/recovery") ? (
 				<EventForm

e2e/ui/fixtures/server-actions.ts

@@ -27,3 +27,8 @@ export const createEvent = (input: unknown) =>
 	fixtureAction("create-event", input);
 export const updateEvent = (input: unknown) =>
 	fixtureAction("update-event", input);
+
+export const deleteImportedFurni = (input: unknown) =>
+	fixtureAction("delete-imported-furni", input);
+export const setFurnidataTranslateEnabled = (input: unknown) =>
+	fixtureAction("furnidata-translation", input);

src/components/admin/studio/studio-panel-loading.tsx

@@ -0,0 +1,47 @@
+"use client";
+import { Loader2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+export function StudioPanelLoading({
+	onClose,
+	drawer = false,
+}: {
+	onClose: () => void;
+	drawer?: boolean;
+}) {
+	const t = useTranslations("pages.admin.housekeeping");
+	const status = (
+		<p role="status" className="flex items-center gap-2">
+			<Loader2 className="size-4 animate-spin" aria-hidden="true" />
+			{t("loading")}
+		</p>
+	);
+	if (drawer)
+		return (
+			<aside className="absolute inset-y-0 right-0 z-20 flex h-full w-[min(28rem,100%)] shrink-0 flex-col gap-4 border-l border-[var(--admin-border)] bg-[var(--admin-surface)] p-4 shadow-xl lg:static lg:shadow-none">
+				{status}
+				<Button variant="outline" onClick={onClose}>
+					{t("cancel")}
+				</Button>
+			</aside>
+		);
+	return (
+		<Dialog open onOpenChange={(open) => !open && onClose()}>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>{t("loading")}</DialogTitle>
+				</DialogHeader>
+				{status}
+				<Button variant="outline" onClick={onClose}>
+					{t("cancel")}
+				</Button>
+			</DialogContent>
+		</Dialog>
+	);
+}