Make the route loading more obvious.

package.json

@@ -30,6 +30,7 @@
     "vite-plugin-wasm-pack": "0.1.11"
   },
   "dependencies": {
+    "@megapenthes/svelte4-progressbar": "1.0.1",
     "@turf/bbox": "^6.5.0",
     "@turf/boolean-point-in-polygon": "^6.5.0",
     "@turf/helpers": "^6.5.0",

src/lib/FetchProgressBar.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  export let url: string;
+  export let onSuccess: (bytes: Uint8Array) => void;
+
+  // Both are units of bytes
+  let bytesReceived = 0;
+  let maxBytes = 100;
+  let progressBar = {
+    style: "background: linear-gradient(to right, red 0%, transparent 0);",
+  };
+
+  onMount(async () => {
+    console.log(`Fetching ${url} with a progress bar`);
+    let response = await fetch(url);
+    let reader = response.body.getReader();
+
+    // TODO Handle when missing?
+    maxBytes = parseInt(response.headers.get("Content-Length"));
+
+    let chunks = [];
+    while (true) {
+      let { done, value } = await reader.read();
+      if (done) {
+        break;
+      }
+
+      chunks.push(value);
+      bytesReceived += value.length;
+
+      const percent = (bytesReceived / maxBytes) * 100;
+      progressBar.style = `background: linear-gradient(to right, red ${percent}%, transparent 0);`;
+    }
+
+    let outputBytes = new Uint8Array(maxBytes);
+    let position = 0;
+    console.log(
+      `max bytes ${maxBytes} - bytes received ${bytesReceived} - progress bar style ${progressBar.style}`
+    );
+    for (let chunk of chunks) {
+      console.log(
+        `position ${position}, outputBytes ${outputBytes.length} - chunk length ${chunk.length}`
+      );
+      outputBytes.set(chunk, position);
+      position += chunk.length;
+    }
+    onSuccess(outputBytes);
+  });
+</script>
+
+<progress style={progressBar.style} value={bytesReceived} max={maxBytes} />

src/lib/draw/route/RouteMode.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+  import ProgressBar from "@megapenthes/svelte4-progressbar";
   import type { LineString } from "geojson";
   import init from "route-snapper";
-  import { fetchWithProgress } from "route-snapper/lib.js";
   import { onMount } from "svelte";
   import type { FeatureWithProps } from "../../../maplibre_helpers";
-  import { currentMode, map } from "../../../stores";
+  import { currentMode, map, routeInfo } from "../../../stores";
   import type { Mode } from "../../../types";
   import { handleUnsavedFeature, setupEventListeners } from "../common";
   import type { EventHandler } from "../event_handler";
@@ -16,10 +16,12 @@
   export let changeMode: (m: Mode) => void;
   export let url: string;
 
-  let progress: HTMLDivElement;
   export let routeTool: RouteTool;
   export let eventHandler: EventHandler;
 
+  let progress: Array<number> = [0 ];
+  let routeToolReady = false;
+
   // While the new feature is being drawn, remember its last valid version
   let unsavedFeature: { value: FeatureWithProps<LineString> | null } = {
     value: null,
@@ -45,11 +47,13 @@
 
     console.log(`Grabbing ${url}`);
     try {
-      const graphBytes = await fetchWithProgress(url, progress);
-      routeTool = new RouteTool($map, graphBytes);
+      const graphBytes = await fetchWithProgress(
+        url,
+        (percentLoaded) => (progress[0] = Math.min(percentLoaded, 90))
+      );
+      routeTool = new RouteTool($map, graphBytes, routeInfoDeserialised);
     } catch (err) {
       console.log(`Route tool broke: ${err}`);
-      progress.innerHTML = "Failed to load";
       return;
     }
 
@@ -61,11 +65,51 @@
       changeMode
     );
   });
+
+  async function fetchWithProgress(
+    url,
+    setProgress: (number) => void = (percentLoaded) => {}
+  ) {
+    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 routeInfoDeserialised() {
+  progress[0] = 100;
+  routeToolReady = true;
+ } 
 </script>
 
-{#if !routeTool}
+{#if !routeToolReady}
   <!-- TODO the text should be fixed, and the progress bar float -->
-  <div bind:this={progress}>Route tool loading...</div>
+  <p>Route tool loading</p>
+  <ProgressBar bind:series={progress} />
 {:else if $currentMode == thisMode}
   <RouteControls {routeTool} extendRoute />
 {/if}

src/lib/draw/route/route_tool.ts

@@ -32,11 +32,12 @@ export class RouteTool {
   ) => void)[];
   eventListenersFailure: (() => void)[];
 
-  constructor(map: Map, graphBytes: Uint8Array) {
+  constructor(map: Map, graphBytes: Uint8Array, deserialisedCallback=()=>{}) {
     this.map = map;
     console.time("Deserialize and setup JsRouteSnapper");
     this.inner = new JsRouteSnapper(graphBytes);
     console.timeEnd("Deserialize and setup JsRouteSnapper");
+    deserialisedCallback();
     this.active = false;
     this.eventListenersSuccess = [];
     this.eventListenersUpdated = [];