UX: move minimap into a 'delayedComponent' to give a smoother feeling to opening popups

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}

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;">
+  <DelayedComponent>
     <MaplibreMap interactive={false} map={mlmap} mapProperties={mla} />
+  </DelayedComponent>
 </div>