Show Loading message/noscript

It was way bigger than the whole site.

index.html

@@ -5,11 +5,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>Fuel App</title>
 		<style type="text/css">
-@font-face {
-	src: url("Nunito.woff2") format("woff2");
-	font-family: Nunito;
-	font-weight: 200 1000;
-}
 body {
 	margin:40px auto;
 	max-width:650px;
@@ -17,7 +12,7 @@ body {
 	font-size:18px;
 	color:#444;
 	padding:0 10px;
-	font-family: Nunito, serif;
+	font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, Nunito, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
 	width: fit-content;
 }
     h1,h2,h3{ line-height:1.2 }
@@ -57,8 +52,17 @@ body {
 			<h1>⛽<br>Fuel App</h1>
 		</header>
 
-		<div id="app"></div>
+		<div id="app">
+                  <noscript>JavaScript is required to use this calculator.</noscript>
+                </div>
 
+                  <script type="text/javascript">
+                    const el = document.getElementById('app');
+                    if (el) {
+                      const timer = setTimeout(function() { console.log('ran'); el.textContent = "Loading…" }, 500);
+                      el.dataset.timer = timer;
+                    }
+                  </script>
 		<script type="module">
 			import { reactive, html } from './arrow.min.mjs';
 
@@ -81,6 +85,10 @@ function updateValue(e) {
 	}
 }
 
+const app = document.getElementById('app');
+clearTimeout(parseInt(app.dataset.timer, 10));
+app.replaceChildren(); // Clear loading text
+
 html`
 <form>
 <label for="price">Price</label>
@@ -99,7 +107,7 @@ html`
 <p class="total">
 $${() => calculate().toFixed(2)}
 </p>
-`(document.getElementById('app'))
+`(app)
 		</script>
 	</body>
 </html>