From 57a66771492ffaf97fe6d2f7637ba3bcc213f38b Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Wed, 21 Feb 2024 17:33:29 +0100
Subject: [PATCH] Add style loading indicator, fix #1626

---
 src/UI/Map/OverlayMap.svelte            |  7 ++++++-
 src/UI/Map/RasterLayerPicker.svelte     |  5 +++--
 src/UI/Map/StyleLoadingIndicator.svelte | 19 +++++++++++++++++++
 3 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 src/UI/Map/StyleLoadingIndicator.svelte

diff --git a/src/UI/Map/OverlayMap.svelte b/src/UI/Map/OverlayMap.svelte
index 72f7668e08..089b8f7ba6 100644
--- a/src/UI/Map/OverlayMap.svelte
+++ b/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} />
diff --git a/src/UI/Map/RasterLayerPicker.svelte b/src/UI/Map/RasterLayerPicker.svelte
index 106de77905..a22d5e7d83 100644
--- a/src/UI/Map/RasterLayerPicker.svelte
+++ b/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}
diff --git a/src/UI/Map/StyleLoadingIndicator.svelte b/src/UI/Map/StyleLoadingIndicator.svelte
new file mode 100644
index 0000000000..5398bacb89
--- /dev/null
+++ b/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}