Add a progress bar for the route snapper download. #23

https://javascript.info/fetch-progress used as reference

app.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { dropdown } from "./forms.js";
-import { RouteSnapper } from "./route-snapper/lib.js";
+import { RouteSnapper, fetchWithProgress } from "./route-snapper/lib.js";
 
 export class App {
   constructor() {
@@ -404,7 +404,6 @@ async function setupRouteSnapper(app) {
   // TODO Slight hack. These files are stored in an S3 bucket, which only has an HTTP interface. When deployed to Github pages over HTTPS, we can't mix HTTP and HTTPS content, so use the Cloudfront HTTPS interface. That'll need CDN invalidations when we update these files. But when serving locally for development, HTTPS is also fine to use.
   const url = `https://play.abstreet.org/route-snappers/${app.authority}.bin`;
   console.log(`Grabbing ${url}`);
-  const resp = await fetch(url);
-  const mapBytes = await resp.arrayBuffer();
-  window.routeSnapper = new RouteSnapper(app, new Uint8Array(mapBytes));
+  const mapBytes = await fetchWithProgress(url, "snap-progress");
+  window.routeSnapper = new RouteSnapper(app, mapBytes);
 }

route-snapper/lib.js

@@ -149,3 +149,35 @@ export class RouteSnapper {
       .setData(JSON.parse(this.inner.renderGeojson()));
   }
 }
+
+export async function fetchWithProgress(url, progressId) {
+  const response = await fetch(url);
+  const reader = response.body.getReader();
+
+  const contentLength = response.headers.get("Content-Length");
+  const progressBar = document.getElementById(progressId);
+
+  let receivedLength = 0;
+  let chunks = [];
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) {
+      break;
+    }
+
+    chunks.push(value);
+    receivedLength += value.length;
+
+    const percent = (100.0 * receivedLength) / contentLength;
+    progressBar.style = `background: red; width: ${percent}%`;
+  }
+
+  let allChunks = new Uint8Array(receivedLength);
+  let position = 0;
+  for (let chunk of chunks) {
+    allChunks.set(chunk, position);
+    position += chunk.length;
+  }
+
+  return allChunks;
+}

scheme.html

@@ -72,7 +72,8 @@ <h1 id="authority">Loading...</h1>
       </div>
       <div id="panel" class="content-container"></div>
       <div id="snap-tool" class="overlay-topright">
-        Route snapping tool loading...
+        <!-- TODO the text should be fixed, and the progress bar float -->
+        <div id="snap-progress">Route snapping tool loading...</div>
       </div>
     </main>