webchat: add centered boot loader

2025-12-10 01:04:00 +00:00
parent 83a2a7a1c2
commit 7f0f789953
1 changed files with 26 additions and 1 deletions
--- a/apps/macos/Sources/Clawdis/Resources/WebChat/index.html
+++ b/apps/macos/Sources/Clawdis/Resources/WebChat/index.html
@@ -8,10 +8,35 @@
  <style>
    html, body { height: 100%; margin: 0; padding: 0; }
    #app { height: 100%; padding: 0; margin: 0; }
+    .boot {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      background: #fff;
+    }
+    .boot span {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: #0f172a;
+      animation: boot-pulse 1s ease-in-out infinite;
+    }
+    .boot span:nth-child(2) { animation-delay: 0.15s; }
+    .boot span:nth-child(3) { animation-delay: 0.3s; }
+    @keyframes boot-pulse {
+      0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
+      40% { opacity: 1; transform: scale(1.1); }
+    }
  </style>
 </head>
 <body>
-  <div id="app" style="font:14px -apple-system, BlinkMacSystemFont, sans-serif;color:#222">Booting web chat…</div>
+  <div id="app">
+    <div class="boot" aria-label="Booting web chat">
+      <span></span><span></span><span></span>
+    </div>
+  </div>
  <script type="module" src="webchat.bundle.js"></script>
 </body>
 </html>