AI_Assistant/cad-editor
Watch
1
0
Fork
You've already forked cad-editor
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(web): loading splash while the wasm app initializes

Browse source 
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>
This commit is contained in:
Hakan Seven 2026-06-17 01:55:28 +03:00
commit 5b86274f13
1 changed files with 57 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

58
index.html
View file

@ -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>