Add non-perecentage-based progress bar for unpacking

src/lib/draw/route/RouteMode.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import type { LineString } from "geojson";
   import init from "route-snapper";
-  import { onMount } from "svelte";
+  import { onMount, tick } from "svelte";
   import type { FeatureWithProps } from "../../../maplibre_helpers";
-  import { currentMode, map, routeInfo } from "../../../stores";
+  import { currentMode, map } from "../../../stores";
   import type { Mode } from "../../../types";
   import { handleUnsavedFeature, setupEventListeners } from "../common";
   import type { EventHandler } from "../event_handler";
@@ -20,7 +20,7 @@
 
   let progress: number = 0;
   let routeToolReady = false;
-  let downloadComplete = false;
+  $: downloadComplete = progress >= 100;
   let failedToLoadRouteTool = false;
 
   // While the new feature is being drawn, remember its last valid version
@@ -52,8 +52,7 @@
         url,
         (percentLoaded) => (progress = percentLoaded)
       );
-      downloadComplete = true;
-      routeTool = new RouteTool($map, graphBytes, routeInfoDeserialised);
+      routeTool = new RouteTool($map, graphBytes, routeToolInitialised);
     } catch (err) {
       console.log(`Route tool broke: ${err}`);
       failedToLoadRouteTool = true;
@@ -104,7 +103,7 @@
     return allChunks;
   }
 
-  function routeInfoDeserialised() {
+  function routeToolInitialised() {
     progress = 100;
     routeToolReady = true;
   }
@@ -113,11 +112,17 @@
 {#if !routeToolReady && !failedToLoadRouteTool && !downloadComplete}
   <label for="route-loading">Route tool loading</label>
   <progress id="route-loading" value={progress}></progress>
-{:else if !routeToolReady && downloadComplete}
+{: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

@@ -35,13 +35,12 @@ export class RouteTool {
   constructor(
     map: Map,
     graphBytes: Uint8Array,
-    deserialisedCallback = () => {}
+    initialisedCallback: () => {void}
   ) {
     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 = [];
@@ -86,6 +85,7 @@ export class RouteTool {
       color: "black",
       opacity: 0.5,
     });
+    initialisedCallback();
   }
 
   onMouseMove = (e: MapMouseEvent) => {