Refactor Loading

web/src/common/index.ts

@@ -9,7 +9,6 @@ export { default as DisableInteractiveLayers } from "./DisableInteractiveLayers.
 export { default as Geocoder } from "./Geocoder.svelte";
 export { default as Layout } from "./Layout.svelte";
 export { default as Link } from "./Link.svelte";
-export { default as Loading } from "./Loading.svelte";
 export { default as Modal } from "./Modal.svelte";
 export { default as OverpassSelector } from "./OverpassSelector.svelte";
 export { default as Popup } from "./Popup.svelte";

web/src/title/NewProjectMode.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { LTN } from "backend";
   import { onMount } from "svelte";
-  import { Link, Loading, OverpassSelector } from "../common";
+  import { Loading } from "svelte-utils";
+  import { Link, OverpassSelector } from "../common";
   import { PolygonToolLayer } from "maplibre-draw-polygon";
   import SplitComponent from "../SplitComponent.svelte";
   import {
@@ -17,7 +18,7 @@
   let newProjectName = "";
   let example = "";
   let exampleAreas: [string, [string, string][]][] = [];
-  let msg: string | null = null;
+  let loading = "";
 
   onMount(async () => {
     let resp = await fetch(
@@ -29,6 +30,7 @@
   });
 
   function gotXml(e: CustomEvent<string>) {
+    loading = "Loading OSM";
     try {
       $app = new LTN(new TextEncoder().encode(e.detail), undefined);
       $projectName = `ltn_${newProjectName}`;
@@ -38,7 +40,7 @@
     } catch (err) {
       window.alert(`Couldn't import from Overpass: ${err}`);
     }
-    msg = null;
+    loading = "";
   }
 
   export async function loadExample() {
@@ -55,9 +57,9 @@
         study_area_name: example,
       }),
     );
-    msg = `Loading pre-clipped OSM area ${example}`;
+    loading = `Loading pre-clipped OSM area ${example}`;
     await loadFromLocalStorage(key);
-    msg = null;
+    loading = "";
   }
 </script>
 
@@ -84,7 +86,7 @@
     </div>
 
     {#if newProjectName}
-      <Loading {msg} />
+      <Loading {loading} />
 
       <label>
         Load a built-in area:
@@ -106,7 +108,7 @@
         <OverpassSelector
           map={$map}
           on:gotXml={gotXml}
-          on:loading={(e) => (msg = e.detail)}
+          on:loading={(e) => (loading = e.detail)}
           on:error={(e) => window.alert(e.detail)}
         />
       </div>

web/src/title/TitleMode.svelte

@@ -3,7 +3,7 @@
   import deleteDark from "../../assets/delete_dark.svg?url";
   import editLight from "../../assets/edit_light.svg?url";
   import editDark from "../../assets/edit_dark.svg?url";
-  import { Loading, Link } from "../common";
+  import { Link } from "../common";
   import SplitComponent from "../SplitComponent.svelte";
   import {
     lightMode,
@@ -14,9 +14,11 @@
     route_tool,
   } from "../stores";
   import { loadFromLocalStorage } from "./loader";
+  import { Loading } from "svelte-utils";
 
   export let wasmReady: boolean;
-  let msg: string | null = null;
+
+  let loading = "";
 
   // When other modes reset here, they can't clear state without a race condition
   $app = null;
@@ -41,11 +43,11 @@
   async function loadFile(e: Event) {
     // TODO Be careful with overwriting stuff, leading ltn_, etc
     let key = "ltn_" + fileInput.files![0].name;
-    msg = `Loading from file ${key}`;
+    loading = `Loading from file ${key}`;
     window.localStorage.setItem(key, await fileInput.files![0].text());
     projectList = getProjectList();
     await loadFromLocalStorage(key);
-    msg = null;
+    loading = "";
   }
 
   function deleteProject(key: string) {
@@ -71,13 +73,13 @@
   }
 
   async function loadProject(key: string) {
-    msg = `Loading project ${key}`;
+    loading = `Loading project ${key}`;
     await loadFromLocalStorage(key);
-    msg = null;
+    loading = "";
   }
 </script>
 
-<Loading {msg} />
+<Loading {loading} />
 
 <SplitComponent>
   <div slot="top">