Make the route loading more obvious.

src/lib/draw/route/RouteMode.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import type { LineString } from "geojson";
   import init from "route-snapper";
-  import { fetchWithProgress } from "route-snapper/lib.js";
-  import { onMount } from "svelte";
+  import { onMount, tick } from "svelte";
   import type { FeatureWithProps } from "../../../maplibre_helpers";
   import { currentMode, map } from "../../../stores";
   import type { Mode } from "../../../types";
@@ -16,10 +15,14 @@
   export let changeMode: (m: Mode) => void;
   export let url: string;
 
-  let progress: HTMLDivElement;
   export let routeTool: RouteTool;
   export let eventHandler: EventHandler;
 
+  let progress: number = 0;
+  let routeToolReady = false;
+  $: downloadComplete = progress >= 100;
+  let failedToLoadRouteTool = false;
+
   // While the new feature is being drawn, remember its last valid version
   let unsavedFeature: { value: FeatureWithProps<LineString> | null } = {
     value: null,
@@ -45,11 +48,15 @@
 
     console.log(`Grabbing ${url}`);
     try {
-      const graphBytes = await fetchWithProgress(url, progress);
-      routeTool = new RouteTool($map, graphBytes);
+      const graphBytes = await fetchWithProgress(
+        url,
+        (percentLoaded) => (progress = percentLoaded)
+      );
+      routeTool = new RouteTool($map, graphBytes, routeToolInitialised);
     } catch (err) {
       console.log(`Route tool broke: ${err}`);
-      progress.innerHTML = "Failed to load";
+      failedToLoadRouteTool = true;
+
       return;
     }
 
@@ -61,11 +68,58 @@
       changeMode
     );
   });
+
+  async function fetchWithProgress(url, setProgress: (number) => void) {
+    const response = await fetch(url);
+    const reader = response.body.getReader();
+
+    const contentLength = parseInt(response.headers.get("Content-Length"));
+
+    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;
+      setProgress(percent);
+    }
+
+    let allChunks = new Uint8Array(receivedLength);
+    let position = 0;
+    for (let chunk of chunks) {
+      allChunks.set(chunk, position);
+      position += chunk.length;
+    }
+
+    return allChunks;
+  }
+
+  function routeToolInitialised() {
+    progress = 100;
+    routeToolReady = true;
+  }
 </script>
 
-{#if !routeTool}
-  <!-- TODO the text should be fixed, and the progress bar float -->
-  <div bind:this={progress}>Route tool loading...</div>
+{#if !routeToolReady && !failedToLoadRouteTool && !downloadComplete}
+  <label for="route-loading">Route tool loading</label>
+  <progress id="route-loading" value={progress} />
+{:else if downloadComplete && !routeToolReady && !failedToLoadRouteTool}
+  <label for="route-unpacking">Route data unpacking</label>
+  <progress id="route-unpacking" />
+{:else if failedToLoadRouteTool}
+  <p>Failed to load</p>
 {:else if $currentMode == thisMode}
   <RouteControls {routeTool} extendRoute />
 {/if}
+
+<style>
+  progress {
+    width: 100%;
+  }
+</style>

src/lib/draw/route/route_tool.ts

@@ -32,7 +32,11 @@ export class RouteTool {
   ) => void)[];
   eventListenersFailure: (() => void)[];
 
-  constructor(map: Map, graphBytes: Uint8Array) {
+  constructor(
+    map: Map,
+    graphBytes: Uint8Array,
+    initialisedCallback: () => { void }
+  ) {
     this.map = map;
     console.time("Deserialize and setup JsRouteSnapper");
     this.inner = new JsRouteSnapper(graphBytes);
@@ -81,6 +85,7 @@ export class RouteTool {
       color: "black",
       opacity: 0.5,
     });
+    initialisedCallback();
   }
 
   onMouseMove = (e: MapMouseEvent) => {