UX: translate 'creating point', indicate that a new background layer is loading in the selectBackgroundButton

langs/en.json

@@ -123,6 +123,7 @@
             "confirmLocation": "Confirm this location",
             "confirmTitle": "Add a {title}?",
             "confirmWarning": "The feature you create here will be <b>visible for everyone</b>. Please, only add things on to the map if they truly exist. A lot of applications use this data.",
+            "creating": "Creating a new point...",
             "disableFilters": "Disable all filters",
             "disableFiltersExplanation": "Some features might be hidden by a filter",
             "enableLayer": "Enable layer {name}",

langs/layers/en.json

@@ -1412,6 +1412,7 @@
             },
             "Capacity": {
                 "question": "How many bicycles fit in this bicycle parking (including possible cargo bicycles)?",
+                "questionHint": "This includes regular bicycles, cargo bikes, ebikes, ...",
                 "render": "Place for {capacity} bikes"
             },
             "Cargo bike capacity?": {

langs/layers/nl.json

@@ -1151,6 +1151,7 @@
             },
             "Capacity": {
                 "question": "Hoeveel fietsen kunnen in deze fietsparking (inclusief potentiëel bakfietsen)?",
+                "questionHint": "Dit is het totaal aantal gewone fietsen, bakfietsen, elektrische fietsen, ...",
                 "render": "Plaats voor {capacity} fietsen"
             },
             "Cargo bike capacity?": {
@@ -6545,6 +6546,11 @@
                 }
             },
             "opening_hours": {
+                "mappings": {
+                    "0": {
+                        "then": "Gesloten voor onbepaalde duur"
+                    }
+                },
                 "question": "Wat zijn de openingstijden van {title()}?",
                 "render": "<h3>Openingstijden</h3>{opening_hours_table(opening_hours)}"
             },

src/UI/Base/Loading.svelte

@@ -2,10 +2,10 @@
   import { twMerge } from "tailwind-merge"
   import Loading from "../../assets/svg/Loading.svelte"
 
-  export let cls: string = undefined
+  export let cls: string = "flex p-1 pl-2"
 </script>
 
-<div class={twMerge("flex p-1 pl-2", cls)}>
+<div class={cls}>
   <div class="min-w-6 h-6 w-6 shrink-0 animate-spin self-center">
     <Loading />
   </div>

src/UI/BigComponents/OpenBackgroundSelectorButton.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
   /**
    * A mapcontrol button which allows the user to select a different background.
-   * Even though the component is very small, it gets it's own class as it is often reused
+   * Even though the component is very small, it gets its own class as it is often reused
    */
   import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
   import type { SpecialVisualizationState } from "../SpecialVisualization"
   import Translations from "../i18n/Translations"
   import MapControlButton from "../Base/MapControlButton.svelte"
   import Tr from "../Base/Tr.svelte"
+  import StyleLoadingIndicator from "../Map/StyleLoadingIndicator.svelte"
+  import { UIEventSource } from "../../Logic/UIEventSource"
+  import { Map as MlMap } from "maplibre-gl"
+  import ThemeViewState from "../../Models/ThemeViewState"
 
-  export let state: SpecialVisualizationState
+  export let state: ThemeViewState
   export let hideTooltip = false
 </script>
 
@@ -17,7 +21,10 @@
   arialabel={Translations.t.general.labels.background}
   on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
 >
-  <Square3Stack3dIcon class="h-6 w-6" />
+  
+  <StyleLoadingIndicator map={state.map} rasterLayer={state.mapProperties.rasterLayer} >
+    <Square3Stack3dIcon class="h-6 w-6" />
+  </StyleLoadingIndicator>
   {#if !hideTooltip}
     <Tr cls="mx-2" t={Translations.t.general.backgroundSwitch} />
   {/if}

src/UI/Image/UploadingImageCounter.svelte

@@ -36,13 +36,17 @@
       <Tr t={t.upload.failReasonsAdvanced} />
     </div>
   {:else if $retried === 1}
-    <Loading cls="alert">
+    <div class="alert">
+    <Loading>
       <Tr t={t.upload.one.retrying} />
     </Loading>
+    </div>
   {:else}
-    <Loading cls="alert">
+    <div class="alert">
+    <Loading>
       <Tr t={t.upload.one.uploading} />
     </Loading>
+    </div>
   {/if}
 {:else if $uploadStarted > 1}
   {#if $uploadFinished + $failed === $uploadStarted && $uploadFinished > 0}

src/UI/Map/StyleLoadingIndicator.svelte

@@ -6,14 +6,26 @@
 
   let isLoading = false
   export let map: UIEventSource<MlMap>
+  export let rasterLayer: UIEventSource<any> = undefined
+  
+  let didChange = undefined
+  onDestroy(rasterLayer?.addCallback(() => {
+    didChange = true
+  }) ??( () => {}))
+  
   onDestroy(Stores.Chronic(250).addCallback(
     () => {
-      isLoading = !map.data?.isStyleLoaded()
+      isLoading = !map.data?.isStyleLoaded() && (didChange === undefined || didChange)
+      if(didChange){
+        didChange = false
+      }
     },
   ))
 </script>
 
 
 {#if isLoading}
-  <Loading />
+  <Loading cls="h-6 w-6" />
+{:else}
+  <slot />
 {/if}

src/UI/Popup/AddNewPoint/AddNewPoint.svelte

@@ -364,7 +364,7 @@
         </div>
       </div>
     {:else}
-      <Loading>Creating point...</Loading>
+      <Loading><Tr t={Translations.t.general.add.creating}/> </Loading>
     {/if}
   </div>
 </LoginToggle>