From 3547cb7c92e606f1672025052910224bc0ea2db8 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Wed, 8 Jan 2025 16:36:34 +0100
Subject: [PATCH] UX: move minimap into a 'delayedComponent' to give a smoother
 feeling to opening popups

---
 src/UI/Base/DelayedComponent.svelte | 21 +++++++++++++++++++++
 src/UI/Popup/MinimapViz.svelte      | 12 +++++++++---
 2 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 src/UI/Base/DelayedComponent.svelte

diff --git a/src/UI/Base/DelayedComponent.svelte b/src/UI/Base/DelayedComponent.svelte
new file mode 100644
index 0000000000..2f807eb571
--- /dev/null
+++ b/src/UI/Base/DelayedComponent.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Utils } from "../../Utils"
+  import Loading from "./Loading.svelte"
+
+  /**
+   * Some components are slow to load
+   * This item draws a 'loading' and will only start loading after a few milliseconds
+   */
+  export let timeout = 200
+  let timeoutReached = false
+  Utils.waitFor(timeout).then(() => {
+    timeoutReached = true
+  })
+</script>
+
+
+{#if timeoutReached}
+  <slot />
+{:else }
+  <Loading cls="h-full w-full flex justify-center items-center low-interaction"/>
+{/if}
diff --git a/src/UI/Popup/MinimapViz.svelte b/src/UI/Popup/MinimapViz.svelte
index e18a269e40..6aea2896c2 100644
--- a/src/UI/Popup/MinimapViz.svelte
+++ b/src/UI/Popup/MinimapViz.svelte
@@ -7,6 +7,9 @@
   import ShowDataLayer from "../Map/ShowDataLayer"
   import StaticFeatureSource from "../../Logic/FeatureSource/Sources/StaticFeatureSource"
   import MaplibreMap from "../Map/MaplibreMap.svelte"
+  import Loading from "../Base/Loading.svelte"
+  import { Utils } from "../../Utils"
+  import DelayedComponent from "../Base/DelayedComponent.svelte"
 
   export let state: SpecialVisualizationState
   export let tagSource: UIEventSource<Record<string, string>>
@@ -47,7 +50,7 @@
       }
       return features
     },
-    [tagSource]
+    [tagSource],
   )
 
   let mlmap = new UIEventSource(undefined)
@@ -73,10 +76,13 @@
     mlmap,
     new StaticFeatureSource(featuresToShow),
     state.theme.layers,
-    { zoomToFeatures: true }
+    { zoomToFeatures: true },
   )
+
 </script>
 
 <div class="h-40 rounded" style="overflow: hidden; pointer-events: none;">
-  <MaplibreMap interactive={false} map={mlmap} mapProperties={mla} />
+  <DelayedComponent>
+    <MaplibreMap interactive={false} map={mlmap} mapProperties={mla} />
+  </DelayedComponent>
 </div>