From c02e5e51b62c2d407bf218a3c31ae3ef1aa7e1b0 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Fri, 26 Apr 2024 17:10:52 +0100
Subject: [PATCH] Refactor Loading

---
 web/package-lock.json                       |  2 +-
 web/src/common/Loading.svelte               | 25 ---------------------
 web/src/common/import/ImportControls.svelte |  4 ++--
 web/src/common/index.ts                     |  1 -
 4 files changed, 3 insertions(+), 29 deletions(-)
 delete mode 100644 web/src/common/Loading.svelte

diff --git a/web/package-lock.json b/web/package-lock.json
index 6ccb0f43..539a0521 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -2844,7 +2844,7 @@
     },
     "node_modules/svelte-utils": {
       "version": "0.0.1",
-      "resolved": "git+ssh://git@github.com/a-b-street/svelte-utils.git#d37f5affb4458ec346a9d1efc0ad1059a94d0343",
+      "resolved": "git+ssh://git@github.com/a-b-street/svelte-utils.git#ad406fcbfd2f41d58d3459ac16719536a6a54c91",
       "peerDependencies": {
         "svelte": "^4.0.0"
       }
diff --git a/web/src/common/Loading.svelte b/web/src/common/Loading.svelte
deleted file mode 100644
index 6a045558..00000000
--- a/web/src/common/Loading.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-  export let msg: string | null = null;
-</script>
-
-{#if msg}
-  <div>{msg}</div>
-{/if}
-
-<style>
-  div {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 999;
-
-    color: white;
-    font-size: 32px;
-  }
-</style>
diff --git a/web/src/common/import/ImportControls.svelte b/web/src/common/import/ImportControls.svelte
index fcab59da..db06f4e0 100644
--- a/web/src/common/import/ImportControls.svelte
+++ b/web/src/common/import/ImportControls.svelte
@@ -12,7 +12,7 @@
   } from "../store";
   import { bbox, downloadGeneratedFile } from "../utils";
   import Osm2streetsSettings from "./Osm2streetsSettings.svelte";
-  import { Loading } from "../";
+  import { Loading } from "svelte-utils";
 
   // This component manages a state machine for importing OSM data (from
   // Overpass or built-in files) and letting the user change import settings. It
@@ -157,7 +157,7 @@
     {#if imported.kind === "nothing"}
       <p>Choose an option above to import somewhere</p>
     {:else if imported.kind === "loading"}
-      <Loading msg={imported.msg} />
+      <Loading loading={imported.msg} />
     {:else if imported.kind === "done"}
       <div>
         <button type="button" on:click={update}>Update OSM data</button>
diff --git a/web/src/common/index.ts b/web/src/common/index.ts
index a6cb14f7..7b40d02d 100644
--- a/web/src/common/index.ts
+++ b/web/src/common/index.ts
@@ -1,7 +1,6 @@
 export { default as BasemapPicker } from "./BasemapPicker.svelte";
 export { default as Geocoder } from "./Geocoder.svelte";
 export { default as Layout } from "./Layout.svelte";
-export { default as Loading } from "./Loading.svelte";
 export { default as Map } from "./Map.svelte";
 export { default as StreetView } from "./StreetView.svelte";
 export { default as ThemePicker } from "./ThemePicker.svelte";