From 5b86274f133deadfea56cb9a97c88bea6e7fc3d6 Mon Sep 17 00:00:00 2001
From: Hakan Seven <hakanseven8125@gmail.com>
Date: Wed, 17 Jun 2026 01:55:28 +0300
Subject: [PATCH] feat(web): loading splash while the wasm app initializes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Show a centered spinner + title until the app's canvas mounts, then fade
it out — the wasm bundle takes a moment to download and start.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 index.html | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 74066bf7..6d1dd5e4 100644
--- a/index.html
+++ b/index.html
@@ -7,10 +7,66 @@
     <style>
       html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #1e1e1e; }
       canvas { display: block; }
+
+      /* Splash shown while the wasm bundle downloads and initializes. Removed
+         once the app's canvas appears (see the observer script below). */
+      #loading {
+        position: fixed;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 22px;
+        background: #1e1e1e;
+        color: #cfcfcf;
+        font-family: system-ui, sans-serif;
+        z-index: 9999;
+        transition: opacity 0.4s ease;
+      }
+      #loading.hide { opacity: 0; pointer-events: none; }
+      #loading .title { font-size: 22px; font-weight: 600; letter-spacing: 0.5px; }
+      #loading .title span { color: #3399e6; }
+      #loading .sub { font-size: 12px; color: #777; }
+      #loading .spinner {
+        width: 46px;
+        height: 46px;
+        border: 4px solid #2e2e2e;
+        border-top-color: #3399e6;
+        border-radius: 50%;
+        animation: ocs-spin 0.9s linear infinite;
+      }
+      @keyframes ocs-spin { to { transform: rotate(360deg); } }
     </style>
     <!-- Trunk builds the wasm32 binary without the `solid3d` feature (no 3-D
          solid kernel / vtkio C deps on the web). See issue #45. -->
     <link data-trunk rel="rust" data-bin="OpenCADStudio" data-cargo-no-default-features />
   </head>
-  <body></body>
+  <body>
+    <div id="loading">
+      <div class="spinner"></div>
+      <div class="title">Open <span>CAD</span> Studio</div>
+      <div class="sub">Loading…</div>
+    </div>
+    <script>
+      // The app mounts a <canvas> into <body> when it's ready. Watch for it and
+      // fade the splash out.
+      (function () {
+        const splash = document.getElementById("loading");
+        const done = () => {
+          if (!splash) return;
+          splash.classList.add("hide");
+          setTimeout(() => splash.remove(), 450);
+        };
+        if (document.querySelector("canvas")) return done();
+        const obs = new MutationObserver(() => {
+          if (document.querySelector("canvas")) {
+            obs.disconnect();
+            done();
+          }
+        });
+        obs.observe(document.body, { childList: true, subtree: true });
+      })();
+    </script>
+  </body>
 </html>
