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>
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -443,6 +443,7 @@
|
||||
"cadImportFailed": "CAD 图纸转换失败,请确认文件完整且版本受支持。",
|
||||
"uploadingImage": "上传中",
|
||||
"extractingText": "提取文字",
|
||||
"generatingImage": "正在生成中",
|
||||
"textNode": "文本节点",
|
||||
"frameNode": "画框",
|
||||
"generateImage": "生成图片",
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user