Show Loading message/noscript

index.html

@@ -52,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';
 
@@ -76,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>
@@ -94,7 +107,7 @@ html`
 <p class="total">
 $${() => calculate().toFixed(2)}
 </p>
-`(document.getElementById('app'))
+`(app)
 		</script>
 	</body>
 </html>