افزودن لودینگ

frontend/viewer.css

@@ -6,3 +6,6 @@ html, body, #viewport { width: 100%; height: 100%; margin: 0; overflow: hidden;
 #viewport > svg { display: block; width: 100%; height: 100%; overflow: hidden; }
 #state { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #333; font-size: 14px; text-align: center; }
 #state:empty { display: none; }
+#state.loading { width: 28px; height: 28px; font-size: 0; border: 2px solid #dce2e0; border-top-color: #536963; border-radius: 50%; pointer-events: none; animation: loading-spin .8s linear infinite; }
+@keyframes loading-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { #state.loading { animation: none; } }

frontend/viewer.html

@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><title>Schematic</title><link rel="stylesheet" href="/fonts.css"><link rel="stylesheet" href="/assets/viewer.css"><script type="module" src="/assets/viewer.js"></script></head><body><main id="viewport" aria-label="Schematic viewer" tabindex="0"></main><output id="state" role="status"></output></body></html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><title>Schematic</title><link rel="stylesheet" href="/fonts.css"><link rel="stylesheet" href="/assets/viewer.css"><script type="module" src="/assets/viewer.js"></script></head><body><main id="viewport" aria-label="Schematic viewer" tabindex="0"></main><output id="state" class="loading" role="status">Loading schematic…</output></body></html>

frontend/viewer.js

@@ -46,6 +46,7 @@ async function start() {
   viewport.append(svg);
   await document.fonts.ready;
   viewport.style.backgroundColor = background;
+  state.classList.remove('loading');
   state.textContent = '';
   paint();
   viewport.addEventListener('wheel', e => {
@@ -93,4 +94,7 @@ async function start() {
   }
   expire();
 }
-start().catch(e => { if (e.name !== 'AbortError') state.textContent = e.message; });
+start().catch(e => {
+  state.classList.remove('loading');
+  state.textContent = e.name === 'AbortError' ? '' : e.message;
+});