Loading indicator for OL layers / Nominatim (#248)

* Loading indicator for OL layers

* Fix CI issues

* Reduce number of Nominatim calls

Author: m-mohr

src/components/DataCabinet.vue

@@ -3,11 +3,13 @@ import { mdiChevronDown } from '@mdi/js'
 import { ref } from 'vue'
 import useSearch from '../composables/useSearch'
 import useSettings from '../composables/useSettings'
+import useMap from '../composables/useMap'
 import ProcessingPanel from './ProcessingPanel.vue'
 import GlobalDataPanel from './GlobalDataPanel.vue'
 
 const { searchStatus } = useSearch()
 const { modelTitle, settings } = useSettings()
+const { isLayerLoading } = useMap()
 
 // Sidebar state
 const isWorking = ref(false)
@@ -19,7 +21,7 @@ const toggleCollapsible = () => {
 
 <template>
   <v-card
-    :loading="isWorking || searchStatus === true"
+    :loading="isWorking || isLayerLoading || searchStatus === true"
     elevation="8"
     :class="{ closed: !isOpen, 'data-cabinet': true, sidebar: true, [settings.mode]: true }"
   >

src/components/GeocodingSearch.vue

@@ -12,12 +12,22 @@ const isLoadingPlaces = ref(false)
 const placeSearch = ref('')
 const suggestedPlaces = shallowRef<{ value: PlaceResult; title: string }[]>([])
 
+// Set loading immediately so the indicator appears before the debounce delay
+watch(placeSearch, (newSearch) => {
+  if (suggestedPlaces.value.some((p) => p.title === newSearch)) return
+  if (newSearch.length >= 3) {
+    isLoadingPlaces.value = true
+  } else {
+    isLoadingPlaces.value = false
+    suggestedPlaces.value = []
+  }
+})
+
 watch(
   placeSearch,
   debounce(async (newSearch: string) => {
-    if (newSearch.length < 3) return
+    if (suggestedPlaces.value.some((p) => p.title === newSearch) || newSearch.length < 3) return
 
-    isLoadingPlaces.value = true
     try {
       const referer = 'https://github.com/fieldsoftheworld/ftw-inference-app'
       const response = await fetch(

src/composables/useMap.ts

@@ -1,4 +1,5 @@
-import { ref, shallowRef, watch } from 'vue'
+import { ref, shallowRef, watch, computed } from 'vue'
+import type TileSource from 'ol/source/Tile'
 import type Map from 'ol/Map'
 import VectorSource from 'ol/source/Vector'
 import VectorLayer from 'ol/layer/Vector'
@@ -28,6 +29,24 @@ import { inferenceStyle } from '../layers/color-scales'
 
 let featureId = 0
 
+const loadingCount = ref(0)
+export const isLayerLoading = computed(() => loadingCount.value > 0)
+
+export function trackTileSource(source: TileSource): () => void {
+  const onStart = () => {
+    loadingCount.value++
+  }
+  const onEnd = () => {
+    loadingCount.value = Math.max(0, loadingCount.value - 1)
+  }
+  source.on('tileloadstart', onStart)
+  source.on(['tileloadend', 'tileloaderror'], onEnd)
+  return () => {
+    source.un('tileloadstart', onStart)
+    source.un(['tileloadend', 'tileloaderror'], onEnd)
+  }
+}
+
 export interface AreaValues {
   min_area_km2: number
   max_area_km2: number
@@ -56,6 +75,13 @@ export const geoJsonResults = shallowRef<any[]>([])
 // Cloudless layer management
 const cloudlessLayer = shallowRef<TileLayer<XYZ> | null>(null)
 
+let untrackCloudless: (() => void) | null = null
+watch(cloudlessLayer, (newLayer) => {
+  untrackCloudless?.()
+  const src = newLayer?.getSource() as TileSource | null
+  untrackCloudless = src ? trackTileSource(src) : null
+})
+
 // Watch for year changes and update the cloudless layer
 watch(
   () => settings.value.year,
@@ -99,6 +125,20 @@ const s2GridLayer = shallowRef<VectorLayer<VectorSource> | null>(null)
 const globalPredictionsLayer = shallowRef<VectorTileLayer | null>(null)
 const globalOverviewLayer = shallowRef<GlTileLayer | null>(null)
 
+let untrackGlobalPredictions: (() => void) | null = null
+watch(globalPredictionsLayer, (newLayer) => {
+  untrackGlobalPredictions?.()
+  const src = newLayer?.getSource() as TileSource | null
+  untrackGlobalPredictions = src ? trackTileSource(src) : null
+})
+
+let untrackGlobalOverview: (() => void) | null = null
+watch(globalOverviewLayer, (newLayer) => {
+  untrackGlobalOverview?.()
+  const src = newLayer?.getSource() as TileSource | null
+  untrackGlobalOverview = src ? trackTileSource(src) : null
+})
+
 watch(
   () => settings.value.threshold,
   () => {
@@ -365,5 +405,6 @@ export default function useMap() {
     geoJsonResults,
     initCloudlessLayer,
     updateLayers,
+    isLayerLoading,
   }
 }

src/composables/useStacLayer.ts

@@ -1,12 +1,13 @@
 import { shallowRef, watch } from 'vue'
 import { ImageTile } from 'ol/source'
 import TileLayer from 'ol/layer/Tile'
-import { map } from './useMap'
+import { map, trackTileSource } from './useMap'
 import { getTileById, activeTileId, secondActiveTileId } from './useAreaOfInterest'
 import { transformExtent } from 'ol/proj'
 import useSettings from './useSettings'
 
 let currentStacLayer: TileLayer<ImageTile> | null = null
+let untrackStac: (() => void) | null = null
 const stacPreviewTileId = shallowRef<string | null>(null)
 /** Stores the preview tile id while in global mode so it can be restored */
 let savedPreviewTileId: string | null = null
@@ -38,12 +39,18 @@ async function addStacLayer() {
   })
   // Add the new layer to the map
   map.value.addLayer(currentStacLayer)
+  const src = currentStacLayer.getSource()
+  if (src) {
+    untrackStac = trackTileSource(src)
+  }
 }
 
 function removeStacLayer() {
   if (!currentStacLayer) {
     return
   }
+  untrackStac?.()
+  untrackStac = null
   map.value?.removeLayer(currentStacLayer)
   currentStacLayer = null
 }