Add style loading indicator, fix #1626

src/UI/Map/OverlayMap.svelte

@@ -11,6 +11,7 @@
   import type { MapProperties } from "../../Models/MapProperties"
   import { onDestroy } from "svelte"
   import type { RasterLayerPolygon } from "../../Models/RasterLayers"
+  import StyleLoadingIndicator from "./StyleLoadingIndicator.svelte"
 
   export let placedOverMapProperties: MapProperties
   export let placedOverMap: Store<MlMap>
@@ -64,9 +65,13 @@
         updateLocation()
         window.setTimeout(updateLocation, 150)
         window.setTimeout(updateLocation, 500)
-      })
+      }),
     )
   }
 </script>
 
+<div class="absolute w-full h-full flex items-center justify-center"
+     style="z-index: 100">
+  <StyleLoadingIndicator map={altmap} />
+</div>
 <MaplibreMap {interactive} map={altmap} />

src/UI/Map/RasterLayerPicker.svelte

@@ -5,6 +5,7 @@
   import { Store, UIEventSource } from "../../Logic/UIEventSource"
   import { Map as MlMap } from "maplibre-gl"
   import { createEventDispatcher, onDestroy } from "svelte"
+  import StyleLoadingIndicator from "./StyleLoadingIndicator.svelte"
 
   /***
    * Chooses a background-layer out of available options
@@ -78,7 +79,7 @@
 {#if hasLayers}
   <form class="flex h-full w-full flex-col" on:submit|preventDefault={() => {}}>
     <button tabindex="-1" on:click={() => apply()} class="m-0 h-full w-full cursor-pointer p-1">
-      <div class="pointer-events-none h-full w-full">
+      <span class="pointer-events-none h-full w-full relative">
         <OverlayMap
           interactive={false}
           rasterLayer={rasterLayerOnMap}
@@ -86,7 +87,7 @@
           placedOverMapProperties={mapproperties}
           {visible}
         />
-      </div>
+      </span>
     </button>
     <select bind:value={$rasterLayer} class="w-full" on:keydown={handleKeyPress}>
       {#each $availableLayers as availableLayer}

src/UI/Map/StyleLoadingIndicator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Loading from "../Base/Loading.svelte"
+  import { Stores, UIEventSource } from "../../Logic/UIEventSource"
+  import { Map as MlMap } from "maplibre-gl"
+  import { onDestroy } from "svelte"
+
+  let isLoading = false
+  export let map: UIEventSource<MlMap>
+  onDestroy(Stores.Chronic(250).addCallback(
+    () => {
+      isLoading = !map.data?.isStyleLoaded()
+    },
+  ))
+</script>
+
+
+{#if isLoading}
+  <Loading />
+{/if}