From 868da49a52c7fc6a780351c6590f3d9708b0fbbc Mon Sep 17 00:00:00 2001
From: Maofeng <hornjs@qq.com>
Date: Thu, 30 Jul 2026 10:11:52 +0800
Subject: [PATCH] feat(console-web): add swinging iframe load progress

- place an indeterminate progress track below the loading label
- animate the indicator between both ends of the track
- expose an accessible progressbar label for the active view
- honor reduced-motion preferences with a static indicator
---
 crates/wasmeld-console/web/src/host/app.tsx   | 15 ++++++++---
 crates/wasmeld-console/web/src/styles/app.css | 26 +++++++++++++++++++
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/crates/wasmeld-console/web/src/host/app.tsx b/crates/wasmeld-console/web/src/host/app.tsx
index 86e58fc..4c0a25c 100644
--- a/crates/wasmeld-console/web/src/host/app.tsx
+++ b/crates/wasmeld-console/web/src/host/app.tsx
@@ -482,9 +482,18 @@ export default function HostApp() {
         </For>
         <Show when={!frameReady()}>
           <div class="pointer-events-none absolute inset-0 flex items-center justify-center bg-canvas">
-            <div class="flex items-center gap-2 text-sm text-muted">
-              <span class="size-2 animate-pulse rounded-full bg-brand" />
-              正在加载 {title()}
+            <div class="flex flex-col items-center gap-3 text-sm text-muted">
+              <div class="flex items-center gap-2">
+                <span class="size-2 animate-pulse rounded-full bg-brand" />
+                正在加载 {title()}
+              </div>
+              <div
+                class="loading-progress-track"
+                role="progressbar"
+                aria-label={`${title()}加载进度`}
+              >
+                <span class="loading-progress-indicator" />
+              </div>
             </div>
           </div>
         </Show>
diff --git a/crates/wasmeld-console/web/src/styles/app.css b/crates/wasmeld-console/web/src/styles/app.css
index f52586d..df1807b 100644
--- a/crates/wasmeld-console/web/src/styles/app.css
+++ b/crates/wasmeld-console/web/src/styles/app.css
@@ -317,13 +317,39 @@
     @apply h-3 animate-pulse rounded-sm bg-[#dfe6e4];
   }
 
+  .loading-progress-track {
+    @apply h-1 w-40 overflow-hidden rounded-sm bg-line;
+  }
+
+  .loading-progress-indicator {
+    @apply block h-full w-[36%] rounded-sm bg-brand;
+    animation: loading-progress-swing 1s ease-in-out infinite alternate;
+  }
+
   .spin {
     animation: spin 0.8s linear infinite;
   }
 }
 
+@keyframes loading-progress-swing {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(178%);
+  }
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .loading-progress-indicator {
+    animation: none;
+    transform: translateX(89%);
+  }
+}