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('isLoading', { type: Boolean, 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('isLoading', { type: Boolean, 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