@arronqzy/react-view 1.0.12 → 1.0.14

package/src/panel/ReactViewPanel.tsx

@@ -7,6 +7,7 @@ import { usePanelElements } from "./hooks/usePanelElements";
 import { useWorkspaceProjects } from "./hooks/useWorkspaceProjects";
 import type { WorkspaceProjectRecord } from "./library/workspace-project-db";
 import { WorkspaceProjectNav } from "./components/WorkspaceProjectNav";
+import { BusyOverlay } from "./components/BusyOverlay";
 import { PanelCanvas } from "./components/PanelCanvas";
 import { PanelRulers } from "./components/PanelRulers";
 import { type ViewportZoom } from "./viewportZoom";
@@ -14,6 +15,13 @@ import { ElementsLayer } from "./components/ElementsLayer";
 import { SelectLayer } from "./components/SelectLayer";
 import { MoveableLayer } from "./components/MoveableLayer";
 import { buildChartOption, CHART_TYPES } from "./utils/chartOptionBuilder";
+import { readOutputScale, writeOutputScale } from "./utils/outputScale";
+import {
+  assertFileSize,
+  parseJsonText,
+  readFileAsDataUrl,
+  runBusyTask,
+} from "./utils/async-work";
 import { MaterialSidebar } from "./components/MaterialSidebar";
 import { AssistantChatPanel } from "./ai/AssistantChatPanel";
 import {
@@ -44,13 +52,15 @@ import {
   useBlueprintNodeSelectionGuard,
   useBlueprintPageLifecycle,
   stopAllClockSchedules,
+  resolveRunnableNodeType,
+  resolveViewElementIds,
   type BlueprintDocument,
   type BlueprintGraphNode,
   type BlueprintLibraryListItem,
   type BlueprintMetaDraft,
 } from "@arronqzy/react-blueprint";
 import type { LibraryBlueprintResolver } from "@arronqzy/blueprint-dsl";
-import { abortClockNode } from "@arronqzy/blueprint-dsl";
+import { abortClockNode, collectArmedViewEventBindings, EVENT_NODE_TYPE, LIFECYCLE_NODE_TYPE } from "@arronqzy/blueprint-dsl";
 import { WorkspaceStageSplit } from "./components/WorkspaceStageSplit";
 import {
   WorkspaceConfigSidebar,
@@ -94,6 +104,7 @@ import {
   EmptyTitle,
   Input,
   Menubar,
+  MenubarCheckboxItem,
   MenubarContent,
   MenubarItem,
   MenubarMenu,
@@ -460,6 +471,7 @@ export function ReactViewPanel({
   const [titleIconZoom, setTitleIconZoom] = useState(1.6);
   const [pendingPreviewLayerId, setPendingPreviewLayerId] = useState<string | null>(null);
   const [panelFontSize, setPanelFontSize] = useState<"sm" | "md" | "lg">("md");
+  const [outputScale, setOutputScale] = useState(() => readOutputScale());
   const [blueprintOpen, setBlueprintOpen] = useState(false);
   const [assistantOpen, setAssistantOpen] = useState(false);
   const [blueprintGraph, setBlueprintGraph] = useState(() => BlueprintGraph.empty());
@@ -570,6 +582,10 @@ export function ReactViewPanel({
     }
   }, [panelFontSize]);
 
+  useEffect(() => {
+    writeOutputScale(outputScale);
+  }, [outputScale]);
+
   useEffect(() => {
     try {
       const stored = localStorage.getItem(TITLE_ICON_STORAGE_KEY) ?? "";
@@ -729,6 +745,7 @@ export function ReactViewPanel({
           | "jsonConfig"
           | "logicConfig"
           | "clockConfig"
+          | "eventConfig"
         >
       >
     ) => {
@@ -980,18 +997,20 @@ export function ReactViewPanel({
         void refreshBlueprintLibrary();
         return;
       }
-      setBlueprintGraph(BlueprintGraph.fromDocument(record.document));
-      setBlueprintMeta({
-        name: record.name,
-        remark: record.remark ?? "",
+      await runBusyTask(t("common.loadingBlueprint"), async () => {
+        setBlueprintGraph(BlueprintGraph.fromDocument(record.document));
+        setBlueprintMeta({
+          name: record.name,
+          remark: record.remark ?? "",
+        });
+        setActiveBlueprintLibraryId(record.id);
+        setBlueprintSyncedDocument(record.document);
+        setSelectedBlueprintNodeId(null);
+        setConfigFocus("blueprint");
+        setBlueprintOpen(true);
       });
-      setActiveBlueprintLibraryId(record.id);
-      setBlueprintSyncedDocument(record.document);
-      setSelectedBlueprintNodeId(null);
-      setConfigFocus("blueprint");
-      setBlueprintOpen(true);
     },
-    [refreshBlueprintLibrary]
+    [refreshBlueprintLibrary, t]
   );
 
   const snapshotWorkspaceBlueprint = useCallback(() => {
@@ -1045,66 +1064,70 @@ export function ReactViewPanel({
 
   const syncBlueprintToLibrary = useCallback(async () => {
     if (!activeBlueprintLibraryId) return;
+    await runBusyTask(t("common.syncingBlueprint"), async () => {
+      const existing = await getBlueprintLibraryRecord(activeBlueprintLibraryId);
+      if (!existing) {
+        toast({ title: t("panel.messages.blueprintNotFound") });
+        void refreshBlueprintLibrary();
+        setActiveBlueprintLibraryId(null);
+        setBlueprintSyncedDocument(null);
+        return;
+      }
 
-    const existing = await getBlueprintLibraryRecord(activeBlueprintLibraryId);
-    if (!existing) {
-      toast({ title: t("panel.messages.blueprintNotFound") });
-      void refreshBlueprintLibrary();
-      setActiveBlueprintLibraryId(null);
-      setBlueprintSyncedDocument(null);
-      return;
-    }
-
-    const record = buildLibraryRecord({
-      id: existing.id,
-      createdAt: existing.createdAt,
-      document: blueprintGraph.document,
-      meta: blueprintMeta,
-      source: existing.source,
+      const record = buildLibraryRecord({
+        id: existing.id,
+        createdAt: existing.createdAt,
+        document: blueprintGraph.document,
+        meta: blueprintMeta,
+        source: existing.source,
+      });
+      await putBlueprintLibraryRecord(record);
+      setBlueprintSyncedDocument(blueprintGraph.document);
+      await refreshBlueprintLibrary();
+      toast({ title: messages.blueprintSynced(record.name) });
     });
-    await putBlueprintLibraryRecord(record);
-    setBlueprintSyncedDocument(blueprintGraph.document);
-    await refreshBlueprintLibrary();
-    toast({ title: messages.blueprintSynced(record.name) });
   }, [
     activeBlueprintLibraryId,
     blueprintGraph.document,
     blueprintMeta,
     refreshBlueprintLibrary,
+    t,
   ]);
 
   const saveBlueprintToLibrary = useCallback(
     async (meta: BlueprintMetaDraft) => {
-      setBlueprintMeta(meta);
-
-      let recordId = activeBlueprintLibraryId ?? undefined;
-      let createdAt: number | undefined;
-      if (activeBlueprintLibraryId) {
-        const existing = await getBlueprintLibraryRecord(activeBlueprintLibraryId);
-        if (existing?.source === "saved") {
-          recordId = existing.id;
-          createdAt = existing.createdAt;
+      await runBusyTask(t("common.savingBlueprint"), async () => {
+        setBlueprintMeta(meta);
+
+        let recordId = activeBlueprintLibraryId ?? undefined;
+        let createdAt: number | undefined;
+        if (activeBlueprintLibraryId) {
+          const existing = await getBlueprintLibraryRecord(activeBlueprintLibraryId);
+          if (existing?.source === "saved") {
+            recordId = existing.id;
+            createdAt = existing.createdAt;
+          } else {
+            recordId = createLibraryBlueprintId();
+          }
         } else {
           recordId = createLibraryBlueprintId();
         }
-      } else {
-        recordId = createLibraryBlueprintId();
-      }
 
-      const record = buildLibraryRecord({
-        id: recordId,
-        createdAt,
-        document: blueprintGraph.document,
-        meta,
-        source: "saved",
+        const record = buildLibraryRecord({
+          id: recordId,
+          createdAt,
+          document: blueprintGraph.document,
+          meta,
+          source: "saved",
+        });
+        await putBlueprintLibraryRecord(record);
+        setActiveBlueprintLibraryId(record.id);
+        setBlueprintSyncedDocument(blueprintGraph.document);
+        await refreshBlueprintLibrary();
+        toast({ title: t("panel.messages.blueprintSavedLocal") });
       });
-      await putBlueprintLibraryRecord(record);
-      setActiveBlueprintLibraryId(record.id);
-      setBlueprintSyncedDocument(blueprintGraph.document);
-      await refreshBlueprintLibrary();
-      toast({ title: t("panel.messages.blueprintSavedLocal") });
     },
-    [activeBlueprintLibraryId, blueprintGraph.document, refreshBlueprintLibrary]
+    [activeBlueprintLibraryId, blueprintGraph.document, refreshBlueprintLibrary, t]
   );
 
   const openBlueprintMetaDialog = useCallback((mode: "export" | "save") => {
@@ -1115,16 +1138,18 @@ export function ReactViewPanel({
   const handleBlueprintMetaConfirm = useCallback(
     async (meta: BlueprintMetaDraft) => {
       if (blueprintMetaDialogMode === "export") {
-        setBlueprintMeta(meta);
-        downloadBlueprintExport(
-          buildBlueprintExportPayload(blueprintGraph.document, meta)
-        );
-        toast({ title: t("panel.messages.blueprintExported") });
+        await runBusyTask(t("common.exportingPanel"), async () => {
+          setBlueprintMeta(meta);
+          downloadBlueprintExport(
+            buildBlueprintExportPayload(blueprintGraph.document, meta)
+          );
+          toast({ title: t("panel.messages.blueprintExported") });
+        });
         return;
       }
       await saveBlueprintToLibrary(meta);
     },
-    [blueprintGraph.document, blueprintMetaDialogMode, saveBlueprintToLibrary]
+    [blueprintGraph.document, blueprintMetaDialogMode, saveBlueprintToLibrary, t]
   );
 
   const handleRenameBlueprintLibraryItem = useCallback(
@@ -1163,22 +1188,32 @@ export function ReactViewPanel({
 
   const handleBlueprintImportFile = useCallback(
     async (file: File) => {
-      const text = await file.text();
-      const payload = parseBlueprintImportFile(JSON.parse(text) as unknown);
-      const record = libraryRecordFromImport(payload);
-      await putBlueprintLibraryRecord(record);
-      await refreshBlueprintLibrary();
-      if (!activeBlueprintLibraryId) {
-        snapshotWorkspaceBlueprint();
+      try {
+        await runBusyTask(t("common.importingBlueprint"), async () => {
+          assertFileSize(file, "json");
+          const text = await file.text();
+          const payload = parseBlueprintImportFile(await parseJsonText(text));
+          const record = libraryRecordFromImport(payload);
+          await putBlueprintLibraryRecord(record);
+          await refreshBlueprintLibrary();
+          if (!activeBlueprintLibraryId) {
+            snapshotWorkspaceBlueprint();
+          }
+          await loadBlueprintFromLibrary(record.id);
+          toast({ title: t("panel.messages.blueprintImported") });
+        });
+      } catch (error) {
+        toast({
+          title: error instanceof Error ? error.message : t("panel.messages.importInvalidFormat"),
+        });
       }
-      await loadBlueprintFromLibrary(record.id);
-      toast({ title: t("panel.messages.blueprintImported") });
     },
     [
       activeBlueprintLibraryId,
       loadBlueprintFromLibrary,
       refreshBlueprintLibrary,
       snapshotWorkspaceBlueprint,
+      t,
     ]
   );
 
@@ -1220,7 +1255,7 @@ export function ReactViewPanel({
     onProjectApplied: handleWorkspaceProjectApplied,
   });
 
-  const { triggerBlueprintNode } = useBlueprintPageLifecycle({
+  const { triggerBlueprintNode, emitViewEvent, firedLifecyclePhases } = useBlueprintPageLifecycle({
     graph: blueprintGraph,
     active: blueprintOpen,
     bootKey: workspaceProjects.activeProjectId ?? undefined,
@@ -1232,6 +1267,24 @@ export function ReactViewPanel({
     onViewScopeUpdate: handleViewScopeUpdate,
   });
 
+  const boundViewEventTypes = useMemo(
+    () =>
+      collectArmedViewEventBindings(
+        blueprintGraph.document.nodes.map((node) => ({
+          id: node.id,
+          nodeType: resolveRunnableNodeType(node),
+          lifecyclePhase: node.lifecyclePhase,
+          viewElementIds: resolveViewElementIds(node),
+          eventConfig: node.eventConfig,
+        })),
+        blueprintGraph.document.edges,
+        EVENT_NODE_TYPE,
+        LIFECYCLE_NODE_TYPE,
+        firedLifecyclePhases
+      ),
+    [blueprintGraph.document.nodes, blueprintGraph.document.edges, firedLifecyclePhases]
+  );
+
   const handleWorkspaceCreateProject = useCallback(async () => {
     const result = await workspaceProjects.handleCreateProject();
     if (result?.name) {
@@ -1243,6 +1296,7 @@ export function ReactViewPanel({
   const handleWorkspaceOpenProject = useCallback(
     async (id: string) => {
       try {
+        stopAllClockSchedules();
         clearViewElementScopes();
         await workspaceProjects.handleOpenProject(id);
         setSelectedIds([]);
@@ -1556,70 +1610,72 @@ export function ReactViewPanel({
   );
 
   const handleExport = useCallback(() => {
-    const data = exportPanelData();
-    const blob = new Blob([JSON.stringify(data, null, 2)], {
-      type: "application/json",
+    void runBusyTask(t("common.exportingPanel"), async () => {
+      const data = exportPanelData();
+      const blob = new Blob([JSON.stringify(data, null, 2)], {
+        type: "application/json",
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      const safeName = (productName.trim() || "panel")
+        .replace(/[\\/:*?"<>|]/g, "-")
+        .replace(/\s+/g, "-");
+      a.download = `${safeName}-${Date.now()}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
     });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    const safeName = (productName.trim() || "panel")
-      .replace(/[\\/:*?"<>|]/g, "-")
-      .replace(/\s+/g, "-");
-    a.download = `${safeName}-${Date.now()}.json`;
-    a.click();
-    URL.revokeObjectURL(url);
-  }, [exportPanelData, productName]);
+  }, [exportPanelData, productName, t]);
 
   const handleImportFile = useCallback(
     async (file: File) => {
-      const text = await file.text();
-      const parsed = JSON.parse(text) as State;
-      const ok = importPanelData(parsed);
-      if (!ok) {
-        window.alert(messages.importInvalidFormat);
-      } else {
-        setSelectedIds([]);
+      try {
+        await runBusyTask(t("common.importingPanel"), async () => {
+          assertFileSize(file, "json");
+          const text = await file.text();
+          const parsed = await parseJsonText<State>(text);
+          const ok = importPanelData(parsed);
+          if (!ok) {
+            window.alert(messages.importInvalidFormat);
+          } else {
+            setSelectedIds([]);
+          }
+        });
+      } catch (error) {
+        window.alert(
+          error instanceof Error ? error.message : messages.importInvalidFormat
+        );
       }
     },
-    [importPanelData]
+    [importPanelData, t]
   );
 
-  const normalizeTitleIconFile = useCallback((file: File) => {
+  const normalizeTitleIconFile = useCallback(async (file: File) => {
+    const src = await readFileAsDataUrl(file, "read-failed", "image");
     return new Promise<string>((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onerror = () => reject(new Error("read-failed"));
-      reader.onload = () => {
-        const src = typeof reader.result === "string" ? reader.result : "";
-        if (!src) {
-          reject(new Error("empty-data"));
+      const img = new Image();
+      img.onload = () => {
+        const size = 64;
+        const canvas = document.createElement("canvas");
+        canvas.width = size;
+        canvas.height = size;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          reject(new Error("canvas-context-failed"));
           return;
         }
-        const img = new Image();
-        img.onload = () => {
-          const size = 64;
-          const canvas = document.createElement("canvas");
-          canvas.width = size;
-          canvas.height = size;
-          const ctx = canvas.getContext("2d");
-          if (!ctx) {
-            reject(new Error("canvas-context-failed"));
-            return;
-          }
-          ctx.clearRect(0, 0, size, size);
-          // 保持长宽比居中绘制，统一导出 PNG，提升 favicon 兼容性
-          const scale = Math.min(size / img.width, size / img.height);
-          const drawW = img.width * scale;
-          const drawH = img.height * scale;
-          const dx = (size - drawW) / 2;
-          const dy = (size - drawH) / 2;
-          ctx.drawImage(img, dx, dy, drawW, drawH);
-          resolve(canvas.toDataURL("image/png"));
-        };
-        img.onerror = () => reject(new Error("image-decode-failed"));
-        img.src = src;
+        ctx.clearRect(0, 0, size, size);
+        const scale = Math.min(size / img.width, size / img.height);
+        const drawW = img.width * scale;
+        const drawH = img.height * scale;
+        const dx = (size - drawW) / 2;
+        const dy = (size - drawH) / 2;
+        ctx.drawImage(img, dx, dy, drawW, drawH);
+        img.src = "";
+        resolve(canvas.toDataURL("image/png"));
       };
-      reader.readAsDataURL(file);
+      img.onerror = () => reject(new Error("image-decode-failed"));
+      img.src = src;
     });
   }, []);
 
@@ -1784,16 +1840,49 @@ export function ReactViewPanel({
           });
         }
         var scene = document.getElementById("preview-scene");
+        var root = document.getElementById("preview-root");
+        var outputScale = ${outputScale ? "true" : "false"};
+        function rememberBox(node) {
+          if (node.dataset.origLeft != null) return;
+          node.dataset.origLeft = String(parseFloat(node.style.left) || 0);
+          node.dataset.origTop = String(parseFloat(node.style.top) || 0);
+          node.dataset.origWidth = String(parseFloat(node.style.width) || node.offsetWidth || 0);
+          node.dataset.origHeight = String(parseFloat(node.style.height) || node.offsetHeight || 0);
+        }
         function fitScene() {
           if (!scene) return;
           var vw = window.innerWidth || 1;
           var vh = window.innerHeight || 1;
           var sw = ${sceneWidth} || 1;
           var sh = ${sceneHeight} || 1;
-          // 铺满预览窗口：宽高分别缩放，保证内容贴住四边
           var scaleX = vw / sw;
           var scaleY = vh / sh;
-          scene.style.transform = "translate(0px,0px) scale(" + scaleX + "," + scaleY + ")";
+          if (root) root.style.overflow = "hidden";
+          var nodes = scene.querySelectorAll("[data-element-id]");
+          if (outputScale) {
+            scene.style.width = sw + "px";
+            scene.style.height = sh + "px";
+            scene.style.transform = "translate(0px,0px) scale(" + scaleX + "," + scaleY + ")";
+            nodes.forEach(function (node) {
+              rememberBox(node);
+              node.style.left = node.dataset.origLeft + "px";
+              node.style.top = node.dataset.origTop + "px";
+              node.style.width = node.dataset.origWidth + "px";
+              node.style.height = node.dataset.origHeight + "px";
+            });
+            return;
+          }
+          // 块仍按视口撑满，但不对整棵内容做 transform，字体保持原尺寸
+          scene.style.width = vw + "px";
+          scene.style.height = vh + "px";
+          scene.style.transform = "none";
+          nodes.forEach(function (node) {
+            rememberBox(node);
+            node.style.left = (Number(node.dataset.origLeft) * scaleX) + "px";
+            node.style.top = (Number(node.dataset.origTop) * scaleY) + "px";
+            node.style.width = (Number(node.dataset.origWidth) * scaleX) + "px";
+            node.style.height = (Number(node.dataset.origHeight) * scaleY) + "px";
+          });
         }
         fitScene();
         window.addEventListener("resize", fitScene);
@@ -1895,6 +1984,7 @@ export function ReactViewPanel({
       ].join(" ")}
       style={{ ["--panel-font-px" as string]: `${panelFontPx}px` }}
     >
+      <BusyOverlay />
       <TooltipProvider delayDuration={120}>
         <Tooltip open={ellipsisTooltip.open}>
           <TooltipTrigger asChild>
@@ -1913,6 +2003,11 @@ export function ReactViewPanel({
         .panel-font-root :is(span, label, p, strong, button, input, textarea, select, option, a, li) {
           font-size: var(--panel-font-px) !important;
         }
+        /* 画布节点、富文本内容使用各自的字号，不被编辑器 UI 字号强制覆盖 */
+        .panel-font-root [data-workspace-region="view"] :is(span, label, p, strong, button, input, textarea, select, option, a, li),
+        .panel-font-root [data-panel-user-text] :is(span, label, p, strong, button, input, textarea, select, option, a, li) {
+          font-size: inherit !important;
+        }
         .panel-font-root :is(input, textarea):focus,
         .panel-font-root :is(input, textarea):focus-visible {
           outline: none !important;
@@ -2013,6 +2108,14 @@ export function ReactViewPanel({
                 <MenubarRadioItem value="zh-CN">{t("panel.theme.zhCN")}</MenubarRadioItem>
                 <MenubarRadioItem value="en-US">{t("panel.theme.enUS")}</MenubarRadioItem>
               </MenubarRadioGroup>
+              <MenubarSeparator />
+              <MenubarCheckboxItem
+                checked={outputScale}
+                onCheckedChange={(checked) => setOutputScale(checked === true)}
+                title={t("panel.menubar.outputScaleHint")}
+              >
+                {t("panel.menubar.outputScale")}
+              </MenubarCheckboxItem>
             </MenubarContent>
           </MenubarMenu>
         </Menubar>
@@ -2021,6 +2124,7 @@ export function ReactViewPanel({
           activeProjectId={workspaceProjects.activeProjectId}
           activeProjectName={workspaceProjects.activeProjectName}
           dirty={workspaceProjects.dirty}
+          previewingProjectIds={workspaceProjects.previewingProjectIds}
           onCreateProject={handleWorkspaceCreateProject}
           onOpenProject={handleWorkspaceOpenProject}
           onSyncProject={handleWorkspaceSyncProject}
@@ -2510,8 +2614,10 @@ export function ReactViewPanel({
                   try {
                     const normalizedDataUrl = await normalizeTitleIconFile(file);
                     setTitleIconDataUrl(normalizedDataUrl);
-                  } catch {
-                    window.alert(messages.iconReadFailed);
+                  } catch (error) {
+                    window.alert(
+                      error instanceof Error ? error.message : messages.iconReadFailed
+                    );
                   }
                 }}
               />
@@ -2644,6 +2750,10 @@ export function ReactViewPanel({
                       onTableCellAction={(payload) => {
                         void triggerBlueprintNode(payload.blueprintNodeId, payload);
                       }}
+                      boundViewEventTypes={boundViewEventTypes}
+                      onViewUiEvent={(payload) => {
+                        void emitViewEvent(payload);
+                      }}
                     />
 
                     <SelectLayer
@@ -3176,6 +3286,8 @@ export function ReactViewPanel({
               configFocus={sidebarConfigFocus}
               executionLog={executionLogView}
               selectedBlueprintNode={selectedBlueprintNode}
+              blueprintGraphNodes={blueprintGraph.document.nodes}
+              blueprintGraphEdges={blueprintGraph.document.edges}
               allowFalseSignalPropagation={
                 blueprintGraph.document.allowFalseSignalPropagation ?? false
               }

package/src/panel/ai/applyAssistantAction.ts

@@ -202,6 +202,7 @@ function applyBlueprintAddNode(
     fetch: "fetch",
     json: "json",
     and: "and",
+    event: "event",
   };
   const configSource = configSourceMap[alias];
   if (configSource && configSource !== "logic") {

package/src/panel/components/BusyOverlay.tsx

@@ -0,0 +1,25 @@
+import { createPortal } from "react-dom";
+import { useI18n } from "@arronqzy/i18n/react";
+import { useBusyOverlayMessage } from "../utils/async-work";
+
+export function BusyOverlay() {
+  const { t } = useI18n();
+  const message = useBusyOverlayMessage();
+  if (!message || typeof document === "undefined") return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 flex flex-col items-center justify-center gap-3 bg-black/45 px-6"
+      style={{ zIndex: 40000 }}
+      role="status"
+      aria-live="polite"
+      aria-busy="true"
+    >
+      <div className="h-9 w-9 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+      <div className="max-w-sm text-center text-sm text-white">
+        {message || t("common.loading")}
+      </div>
+    </div>,
+    document.body
+  );
+}