add install progress bar

This commit is contained in:
Stewart Allen 2026-02-01 11:09:34 -05:00
commit a001089f0f
2 changed files with 34 additions and 4 deletions

View file

@ -18,6 +18,20 @@
font-family: sans-serif;
font-weight: bold;
}
#progress {
margin-top: 20px;
width: 300px;
height: 20px;
border: 1px solid black;
border-radius: 10px;
background-color: white;
overflow: hidden;
}
#bar {
background-color: #555;
height: 20px;
width: 0%;
}
</style>
<script type="module">
import { version } from '/lib/moto/license.js';
@ -49,9 +63,18 @@
version: map.version || version
});
const bar = document.getElementById('bar');
navigator.serviceWorker.addEventListener('message', e => {
console.log('[SM]', e.data);
let { data } = e;
if (data.progress) {
bar.style.width = `${(data.progress * 100)|0}%`;
return;
} else {
console.log('[SM]', data);
}
setTimeout(() => {
bar.style.width = `100%`;
if (map.mesh) {
location.replace('/mesh/index.html');
} else {
@ -63,6 +86,11 @@
</script>
</head>
<body>Booting Grid.Space</body>
<body>
<div>Installing Grid.Space</div>
<div id="progress">
<div id="bar"></div>
</div>
</body>
</html>

View file

@ -193,8 +193,10 @@ async function preloadBundle() {
const res = await fetch(BUNDLE_URL, { cache: 'no-store' });
const buf = await res.arrayBuffer();
const files = await unpackBundle(buf);
const total = Object.keys(files).length;
await Promise.all(
Object.entries(files).map(([path, blob]) => {
broadcast({ progress: loaded/total });
const ext = path.split('.').pop();
const type =
ext === 'html' ? 'text/html' :