add install progress bar

stewartoallen · stewartoallen · commit a001089f0f5a · 2026-02-01T11:09:34.000-05:00
diff --git a/web/boot/index.html b/web/boot/index.html
@@ -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,10 +63,19 @@
                 version: map.version || version
             });
 
+            const bar = document.getElementById('bar');
+
             navigator.serviceWorker.addEventListener('message', e => {
-                console.log('[SM]', e.data);
-                    setTimeout(() => {
-                        if (map.mesh) {
+                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 {
                         location.replace('/kiri/index.html');
@@ -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>
diff --git a/web/boot/service.js b/web/boot/service.js
@@ -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' :
