Show Loading message/noscript

This commit is contained in:
Wesley Moore 2024-09-04 20:08:59 +10:00
parent fd57189337
commit 0995fa63f0
No known key found for this signature in database

View file

@ -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>