From 0cede6c5046c858b6e7de4fe6f30bb180fb15d1f Mon Sep 17 00:00:00 2001
From: Peter Steinberger <steipete@gmail.com>
Date: Sun, 13 Sep 2026 21:24:54 -0700
Subject: [PATCH] fix(ui): replace widget loading text with a shimmer (#147843)

---
 docs/web/control-ui/chat.md             | 2 ++
 ui/src/components/canvas-widget-view.ts | 9 ++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/docs/web/control-ui/chat.md b/docs/web/control-ui/chat.md
index d0d556d5f1e5..7f72d0ec95d4 100644
--- a/docs/web/control-ui/chat.md
+++ b/docs/web/control-ui/chat.md
@@ -371,6 +371,8 @@ Absolute external `http(s)` embed URLs stay blocked by default. To let `[embed u
 
 Widgets created by `show_widget` load through the authenticated Gateway connection in every sandbox mode, including while settings are loading. In `strict` mode, their content remains visible but scripted interactions are disabled.
 
+While a widget loads, a subtle shimmer reserves its space without displaying loading text. With reduced motion enabled, the placeholder stays still.
+
 The core [`show_widget`](/tools/show-widget) tool renders self-contained SVG or HTML directly from a tool call. The browser and supported native chat clients advertise the `inline-widgets` Gateway capability, and the resulting Canvas document remains available when chat history reloads. Channel plugins such as Discord Activities can register contextual presenters behind that same tool. Channel-originated runs without an eligible presenter or inline client do not receive it.
 
 ## Chat transcript layout
diff --git a/ui/src/components/canvas-widget-view.ts b/ui/src/components/canvas-widget-view.ts
index a1d3114ebca2..c4fb9e3bc063 100644
--- a/ui/src/components/canvas-widget-view.ts
+++ b/ui/src/components/canvas-widget-view.ts
@@ -321,9 +321,12 @@ export class OpenClawCanvasWidgetView extends OpenClawLightDomContentsElement {
       </div>`;
     }
     if (!this.view || !this.context) {
-      return html`<div role="status" style=${`min-height:${this.preferredHeight ?? 420}px`}>
-        ${t("common.loading")}
-      </div>`;
+      return html`<div
+        class="skeleton"
+        role="status"
+        aria-label=${t("common.loading")}
+        style=${`min-height:${this.preferredHeight ?? 420}px`}
+      ></div>`;
     }
     let src: string | undefined;
     try {