Show loading icon when WMS layers are loading

src/components/spatialdisplay/SpatialDisplayComponent.vue

@@ -2,11 +2,13 @@
   <MapComponent>
     <AnimatedRasterLayer
       v-if="layerKind === LayerKind.Static && showLayer && layerOptions"
+      v-model:isLoading="isLoading"
       :layer="layerOptions"
       @doubleclick="onCoordinateClick"
     />
     <AnimatedStreamlineRasterLayer
       v-if="layerKind === LayerKind.Streamline && showLayer && layerOptions"
+      v-model:isLoading="isLoading"
       :layerOptions="layerOptions"
       :streamlineOptions="layerCapabilities?.animatedVectors"
       @doubleclick="onCoordinateClick"
@@ -31,6 +33,7 @@
       <InformationPanel
         v-if="layerOptions"
         :layerTitle="props.layerCapabilities?.title"
+        :isLoading="isLoading"
         :currentTime="currentTime"
         :forecastTime="forecastTime"
         :completelyMissing="props.layerCapabilities?.completelyMissing ?? false"
@@ -41,7 +44,7 @@
         :canUseStreamlines="canUseStreamlines"
         v-model:layer-kind="layerKind"
         v-model:show-layer="showLayer"
-      ></InformationPanel>
+      />
       <v-chip
         v-if="hasLocations"
         class="locations-layer__chip"
@@ -185,6 +188,7 @@ const elevationUnit = ref('')
 const currentTime = ref<Date>(new Date())
 const layerOptions = ref<AnimatedRasterLayerOptions>()
 const forecastTime = ref<Date>()
+const isLoading = ref(false)
 let debouncedSetLayerOptions!: () => void
 
 const legendLayerName = ref(props.layerName)

src/components/wms/AnimatedRasterLayer.vue

@@ -33,6 +33,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {})
+const isLoading = defineModel<boolean>('isLoading', { default: false })
 
 const emit = defineEmits(['doubleclick'])
 
@@ -81,6 +82,14 @@ function onDoubleClick(event: MapLayerMouseEvent | MapLayerTouchEvent): void {
   emit('doubleclick', event)
 }
 
+function onStartLoading(): void {
+  isLoading.value = true
+}
+
+function onEndLoading(): void {
+  isLoading.value = false
+}
+
 function addHooksToMapObject() {
   map?.once('load', () => {
     onLayerChange()
@@ -92,12 +101,16 @@ function addHooksToMapObject() {
   map?.on('moveend', onMapMove)
   map?.on('sourcedata', onDataChange)
   map?.on('dblclick', onDoubleClick)
+  map?.on('dataloading', onStartLoading)
+  map?.on('sourcedata', onEndLoading)
 }
 
 function removeHooksFromMapObject(): void {
   map?.off('moveend', onMapMove)
   map?.off('sourcedata', onDataChange)
   map?.off('dblclick', onDoubleClick)
+  map?.off('dataloading', onStartLoading)
+  map?.off('sourcedata', onEndLoading)
 }
 
 function getImageSourceOptions(): any {

src/components/wms/AnimatedStreamlineRasterLayer.vue

@@ -23,6 +23,7 @@ interface Props {
   streamlineOptions?: StreamlineLayerOptionsFews
 }
 const props = defineProps<Props>()
+const isLoading = defineModel<boolean>('isLoading', { default: false })
 const emit = defineEmits(['doubleclick'])
 
 const { map } = useMap()
@@ -96,6 +97,9 @@ function addLayer(): void {
 
   // Create and initialise new streamline layer.
   layer = new WMSStreamlineLayer(layerId, options)
+  layer.on('start-loading', () => (isLoading.value = true))
+  layer.on('end-loading', () => (isLoading.value = false))
+
   // Make sure we are at the appropriate time, elevation and color scale range
   // after the visualiser has been added to the map.
   layer.once('add', async () => {

src/components/wms/InformationPanel.vue

@@ -119,7 +119,8 @@
       variant="plain"
       :color="animate ? 'primary' : undefined"
     >
-      <v-icon>mdi-animation-play</v-icon>
+      <v-progress-circular v-if="isLoading" size="20" indeterminate />
+      <v-icon v-else>mdi-animation-play</v-icon>
     </v-btn>
   </v-chip>
 </template>
@@ -135,6 +136,7 @@ import { useColourScalesStore } from '@/stores/colourScales'
 
 interface Props {
   layerTitle: string
+  isLoading: boolean
   currentTime?: Date
   forecastTime?: Date
   completelyMissing?: boolean

src/lib/streamlines/layer.ts

@@ -77,6 +77,8 @@ export class WMSStreamlineLayer implements CustomLayerInterface {
   private abortController: AbortController
 
   private onLayerAdd: (() => void) | null
+  private onStartLoading: (() => void) | null
+  private onEndLoading: (() => void) | null
   // Pause rendering during map resizes; rendering will be continued by the
   // newly fetched velocity field.
   private onResizeStart = () => this.visualiser?.stop()
@@ -107,6 +109,8 @@ export class WMSStreamlineLayer implements CustomLayerInterface {
     this.abortController = new AbortController()
 
     this.onLayerAdd = null
+    this.onStartLoading = null
+    this.onEndLoading = null
   }
 
   get id(): string {
@@ -212,6 +216,14 @@ export class WMSStreamlineLayer implements CustomLayerInterface {
     this.onLayerAdd = callback
   }
 
+  on(event: 'start-loading' | 'end-loading', callback: () => void): void {
+    if (event === 'start-loading') {
+      this.onStartLoading = callback
+    } else if (event === 'end-loading') {
+      this.onEndLoading = callback
+    }
+  }
+
   async waitForInitialisation(signal?: AbortSignal): Promise<boolean> {
     return new Promise((resolve) => {
       const checkInitialisation = async () => {
@@ -373,6 +385,8 @@ export class WMSStreamlineLayer implements CustomLayerInterface {
   private async updateVelocityField(doResetParticles: boolean): Promise<void> {
     if (!this.map) throw new Error('Not added to a map')
 
+    if (this.onStartLoading) this.onStartLoading()
+
     // Update the canvas size and dimensions for the visualiser. This is no-op
     // if the size has not changed.
     const [width, height] = this.size
@@ -426,6 +440,8 @@ export class WMSStreamlineLayer implements CustomLayerInterface {
 
     // Request a repaint from Maplibre so we (re)start the animation.
     this.map.triggerRepaint()
+
+    if (this.onEndLoading) this.onEndLoading()
   }
 
   private findTimeIndex(time: Date): number {