Editor: loading spinner overlay while compiling

Author: pepc84

editor/index.html

@@ -29,6 +29,7 @@
     #status.compiling { color: #b07000; }
     #status.error { color: #c00; }
     #status.ok { color: #080; }
+    @keyframes spin { to { transform: rotate(360deg); } }
     .btn-run { background: #e8b400; color: #111; border: none; padding: 5px 14px; border-radius: 4px; font-size: 13px; font-weight: 700; cursor: pointer; }
     .btn-run:hover { background: #f5c400; }
     .btn-run:disabled { background: #ccc; color: #888; cursor: not-allowed; }
@@ -68,7 +69,11 @@
       <span class="pane-label">Output</span>
       <button class="btn-stop" onclick="stopSketch()" tabindex="-1">&#9632; Stop</button>
     </div>
-    <div id="preview-area">
+    <div id="preview-area" style="position:relative;">
+      <div id="loading-overlay" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.75);z-index:10;align-items:center;justify-content:center;flex-direction:column;gap:1rem;">
+        <div style="width:40px;height:40px;border:3px solid #444;border-top-color:#e8b400;border-radius:50%;animation:spin 0.8s linear infinite;"></div>
+        <div style="color:#e8b400;font-size:13px;font-family:monospace;">Compiling...</div>
+      </div>
       <div id="preview-placeholder">Press Run or Ctrl+Enter</div>
     </div>
   </div>
@@ -218,6 +223,8 @@
   ep.textContent = '';
   btn.disabled = true;
   setStatus('Compiling...', 'compiling');
+  const overlay = document.getElementById('loading-overlay');
+  if (overlay) overlay.style.display = 'flex';
 
   let resp, data;
   try {
@@ -232,6 +239,7 @@
     ep.textContent = e.message;
     ep.style.display = 'block';
     btn.disabled = false;
+  if (typeof overlay !== 'undefined' && overlay) overlay.style.display = 'none';
     return;
   }