Better loading screen

web/src/common/Loading.svelte

@@ -0,0 +1,25 @@
+<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>

web/src/common/import/ImportControls.svelte

@@ -11,6 +11,7 @@
  } from "../store";
  import { bbox, downloadGeneratedFile } from "../utils";
  import Osm2streetsSettings from "./Osm2streetsSettings.svelte";
+ import { Loading } from "../";
 
  // This component manages a state machine for importing OSM data (from
  // Overpass or built-in files) and letting the user change import settings. It
@@ -151,9 +152,9 @@
  </legend>
 
  {#if imported.kind === "nothing"}
- <p>Use the polygon tool to select an area to import</p>
+ <p>Choose an option above to import somewhere</p>
  {:else if imported.kind === "loading"}
- <p>{imported.msg}</p>
+ <Loading msg={imported.msg} />
  {:else if imported.kind === "done"}
  <div>
  <button type="button" on:click={update}>Update OSM data</button>

web/src/common/index.ts

@@ -2,6 +2,7 @@ export { default as BasemapPicker } from "./BasemapPicker.svelte";
 export { default as Geocoder } from "./Geocoder.svelte";
 export { default as Layout } from "./Layout.svelte";
 export { default as Legend } from "./Legend.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";