From 9da13d281472a085fd1028c4a79535b7b06e7367 Mon Sep 17 00:00:00 2001
From: liangxu <liangxu0920@qq.com>
Date: Fri, 17 Jul 2026 09:07:37 +0800
Subject: [PATCH] fix(canvas): label the generating skeleton with status, not
 the planned title

Show a localized "Generating" label on the artboard generation skeleton
while keeping the planned title as the aria-label, so in-progress nodes read
as a status instead of prematurely displaying their eventual name.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/i18n/locales/en-US.json               |  1 +
 frontend/src/i18n/locales/zh-CN.json               |  1 +
 .../src/ui/components/ArtboardPreview/index.tsx    |  8 ++++----
 frontend/tests/artboardPreview.test.mjs            | 14 ++++++++++++++
 4 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 frontend/tests/artboardPreview.test.mjs

diff --git a/frontend/src/i18n/locales/en-US.json b/frontend/src/i18n/locales/en-US.json
index ebd3fe2..14397f9 100644
--- a/frontend/src/i18n/locales/en-US.json
+++ b/frontend/src/i18n/locales/en-US.json
@@ -443,6 +443,7 @@
   "cadImportFailed": "CAD conversion failed. Check that the file is complete and uses a supported version.",
   "uploadingImage": "Uploading",
   "extractingText": "Extract text",
+  "generatingImage": "Generating",
   "textNode": "Text node",
   "frameNode": "Frame",
   "generateImage": "Generate image",
diff --git a/frontend/src/i18n/locales/zh-CN.json b/frontend/src/i18n/locales/zh-CN.json
index 004db82..df176b3 100644
--- a/frontend/src/i18n/locales/zh-CN.json
+++ b/frontend/src/i18n/locales/zh-CN.json
@@ -443,6 +443,7 @@
   "cadImportFailed": "CAD 图纸转换失败，请确认文件完整且版本受支持。",
   "uploadingImage": "上传中",
   "extractingText": "提取文字",
+  "generatingImage": "正在生成中",
   "textNode": "文本节点",
   "frameNode": "画框",
   "generateImage": "生成图片",
diff --git a/frontend/src/ui/components/ArtboardPreview/index.tsx b/frontend/src/ui/components/ArtboardPreview/index.tsx
index 3431f18..6114487 100644
--- a/frontend/src/ui/components/ArtboardPreview/index.tsx
+++ b/frontend/src/ui/components/ArtboardPreview/index.tsx
@@ -35,7 +35,7 @@ export function ArtboardPreview({ node, viewportScale = 1, imageGeneratorTargetS
   }
 
   if (node.status === "generating") {
-    return <GeneratingArtboardSkeleton title={node.title} style={overlayUiStyle} />;
+    return <GeneratingArtboardSkeleton ariaLabel={node.title} label={t("generatingImage")} style={overlayUiStyle} />;
   }
 
   if (node.status === "text-extracting" && node.type === "image" && isImageUrl(node.content)) {
@@ -153,16 +153,16 @@ function WorkingImagePreview({ node, label, style }: { node: CanvasNode; label:
   );
 }
 
-function GeneratingArtboardSkeleton({ title, style }: { title: string; style?: CSSProperties }) {
+function GeneratingArtboardSkeleton({ ariaLabel, label, style }: { ariaLabel: string; label: string; style?: CSSProperties }) {
   return (
-    <div className="generation-skeleton" aria-label={title} style={style}>
+    <div className="generation-skeleton" aria-label={ariaLabel} style={style}>
       <div className="generation-skeleton-image" />
       <div className="generation-skeleton-lines">
         <span />
         <span />
         <span />
       </div>
-      <span className="generation-skeleton-label">{title}</span>
+      <span className="generation-skeleton-label">{label}</span>
     </div>
   );
 }
diff --git a/frontend/tests/artboardPreview.test.mjs b/frontend/tests/artboardPreview.test.mjs
new file mode 100644
index 0000000..ac37b4a
--- /dev/null
+++ b/frontend/tests/artboardPreview.test.mjs
@@ -0,0 +1,14 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+
+test("shows generation status instead of the planned image title", async () => {
+  const [localeSource, componentSource] = await Promise.all([
+    readFile(new URL("../src/i18n/locales/zh-CN.json", import.meta.url), "utf8"),
+    readFile(new URL("../src/ui/components/ArtboardPreview/index.tsx", import.meta.url), "utf8")
+  ]);
+  const locale = JSON.parse(localeSource);
+
+  assert.equal(locale.generatingImage, "正在生成中");
+  assert.match(componentSource, /GeneratingArtboardSkeleton ariaLabel=\{node\.title\} label=\{t\("generatingImage"\)\}/);
+});