fix: layout shifting after terminal loads

numbat-wasm/www/index.html

@@ -30,6 +30,8 @@
       <img src="numbat.svg" id="logo" width="350" height="230" alt="">
       <p class="desc">high precision scientific calculator with full support for physical units.</p>
       </div>
+      <!-- Use a "skeleton" loader to prevent layout shifts after the terminal loads into the screen. -->
+      <div id="skeleton-loader" class="skeleton-loader"></div>
       <div id="terminal"></div>
       <p class="links"><a href="https://numbat.dev/doc/">Documentation</a> &bull; <a href="https://numbat.dev/doc/example-numbat_syntax.html">Syntax reference</a> &bull; <a href="https://numbat.dev/doc/web-usage.html">Commands and key bindings</a> &bull; <a href="https://github.com/sharkdp/numbat">Source code</a></p>
     </div>

numbat-wasm/www/index.js

@@ -95,6 +95,10 @@ function setup() {
         }
       });
 
+    // Swap out the skeleton loader with the terminal, preventing a layout shift.
+    document.getElementById("skeleton-loader").classList.add("hidden");
+    document.getElementById("terminal").classList.remove("hidden");
+
     // evaluate expression in query string if supplied (via opensearch)
     if (location.search) {
       var queryParams = new URLSearchParams(location.search);

numbat-wasm/www/main.css

@@ -40,6 +40,26 @@ p.links a {
     color: #666;
 }
 
+#skeleton-loader {
+  animation: skeleton-loading 1.5s infinite;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  height: 550px;
+  margin-bottom: 2em;
+  width: 100%;
+}
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.hidden {
+  display: none;
+}
+
 #terminal {
     border-radius: 4px;
     box-shadow: 0px 3px 8px #1a1a1a;