From 0995fa63f0160fdb7b4c5577eed72caed00c354b Mon Sep 17 00:00:00 2001
From: Wesley Moore <wes@wezm.net>
Date: Wed, 4 Sep 2024 20:08:59 +1000
Subject: [PATCH] Show Loading message/noscript

---
 index.html | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index e39676b..f6ad226 100644
--- a/index.html
+++ b/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>