synchronize postrender for streetview tests

Geoportail-Luxembourg · Dec 12, 2024 · 11b0349 · 11b0349
1 parent 80e3ba1
commit 11b0349
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 21 deletions.
diff --git a/cypress/e2e/location-info.cy.ts b/cypress/e2e/location-info.cy.ts
@@ -127,9 +127,9 @@ describe('Location Info', () => {
           })
         cy.get('div.ol-viewport').rightclick(350, 50, { force: true })
         cy.get('[data-cy="streetviewNoData"]').should('not.be.visible')
-        // TODO: think about more reliable sync with google loanding times
-        // eslint-disable-next-line
-        cy.wait(2000)
+        // The waiting animation has been added to allow synchronisation
+        // in the test once the streetview is fully loaded.
+        cy.get('[data-cy="streetviewLoading"]').should('not.be.visible')
         cy.window()
           .its('olMap')
           .then(function (olMap) {

diff --git a/src/assets/main.css b/src/assets/main.css
@@ -241,6 +241,22 @@
     @apply bg-transparent border-none gap-[1px] shadow-none m-0 py-0 float-right relative left-auto;
   }
 
+  .lux-loader {
+    @apply border-[20px] border-solid border-white rounded-full;
+    @apply border-t-[20px] border-t-[color:var(--color-primary)];
+    @apply m-auto w-[200px] h-[200px];
+    animation: lux-loader 4s linear infinite;
+  }
+
+  @keyframes lux-loader {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
   .lux-slider-line {
     @apply absolute h-full w-[4px] left-[50%] bg-primary ml-[-2px] cursor-ew-resize block top-0;
   }

diff --git a/src/components/info/street-view.vue b/src/components/info/street-view.vue
@@ -1,35 +1,54 @@
 <script setup lang="ts">
-import { ref, Ref } from 'vue'
+import { watch, ref, Ref } from 'vue'
 import { useTranslation } from 'i18next-vue'
 import { storeToRefs } from 'pinia'
 import { useInfoStore } from '@/stores/info.store'
+import useMap from '@/composables/map/map.composable'
 import useStreetView from '@/composables/map/street-view.composable'
 
 const { t } = useTranslation()
 
-const { isStreetviewActive, noDataAtLocation } = storeToRefs(useInfoStore())
+const { isStreetviewActive, streetViewLoading, noDataAtLocation } = storeToRefs(
+  useInfoStore()
+)
 
 const streetviewDiv: Ref<HTMLElement | null> = ref(null)
 
 // launch streetView listeners
 useStreetView(streetviewDiv)
+
+const map = useMap().getOlMap()
+watch(streetViewLoading, streetViewLoading => {
+  if (streetViewLoading) {
+    map.getViewport().style.cursor = 'wait'
+  } else {
+    map.getViewport().style.cursor = ''
+  }
+})
 </script>
 
 <template>
-  <div
-    class="grid before:content-streetview before:col-start-1 before:row-start-1"
-    v-show="isStreetviewActive && noDataAtLocation"
-    data-cy="streetviewNoData"
-  >
-    <span class="col-start-1 row-start-1 text-white py-[15px]">
-      {{ t("Il n'y a pas de panorama google disponible à cet endroit") }}
-    </span>
-  </div>
-  <div
-    ref="streetviewDiv"
-    class="h-[500px]"
-    v-show="isStreetviewActive && !noDataAtLocation"
-  >
-    Streetview Container
+  <div class="grid">
+    <div
+      class="grid col-start-1 row-start-1 before:content-streetview before:col-start-1 before:row-start-1"
+      v-show="isStreetviewActive && noDataAtLocation"
+      data-cy="streetviewNoData"
+    >
+      <span class="col-start-1 row-start-1 text-white py-[15px]">
+        {{ t("Il n'y a pas de panorama google disponible à cet endroit") }}
+      </span>
+    </div>
+    <div
+      data-cy="streetviewLoading"
+      v-show="streetViewLoading"
+      class="col-start-1 row-start-1 lux-loader"
+    ></div>
+    <div
+      ref="streetviewDiv"
+      class="h-[500px] col-start-1 row-start-1"
+      v-show="isStreetviewActive && !noDataAtLocation"
+    >
+      Streetview Container
+    </div>
   </div>
 </template>
diff --git a/src/composables/map/street-view.composable.ts b/src/composables/map/street-view.composable.ts
@@ -33,6 +33,7 @@ export default function useStreeView(streetViewDiv: Ref<HTMLElement | null>) {
     hidePointer,
     isStreetviewActive,
     noDataAtLocation,
+    streetViewLoading,
     panoPositionChanging,
     svFeature,
   } = storeToRefs(useInfoStore())
@@ -91,6 +92,7 @@ export default function useStreeView(streetViewDiv: Ref<HTMLElement | null>) {
       })
     } else {
       noDataAtLocation.value = true
+      streetViewLoading.value = false
       svFeature.value = undefined
       panorama!.setVisible(false)
     }
@@ -109,6 +111,7 @@ export default function useStreeView(streetViewDiv: Ref<HTMLElement | null>) {
   watch(locationInfo, loc => {
     if (loc) {
       if (isStreetviewActive.value && !panoPositionChanging.value) {
+        streetViewLoading.value = true
         setLocation(loc)
       }
     } else {
@@ -120,6 +123,7 @@ export default function useStreeView(streetViewDiv: Ref<HTMLElement | null>) {
 
   watch([isStreetviewActive, streetViewDiv], async ([act, streetViewDiv]) => {
     if (act && streetViewDiv) {
+      streetViewLoading.value = true
       await loadGoogleapis()
       if (window.hasOwnProperty('google')) {
         // @ts-ignore
@@ -180,6 +184,9 @@ export default function useStreeView(streetViewDiv: Ref<HTMLElement | null>) {
       hidePointer.value = true
       map.addInteraction(selectFeature)
       map.on('pointermove', handleHover)
+      svFeatureLayer.once('postrender', () => {
+        streetViewLoading.value = false
+      })
     } else {
       map.un('pointermove', handleHover)
       map.removeInteraction(selectFeature)
@@ -240,6 +247,7 @@ export default function useStreeView(streetViewDiv: Ref<HTMLElement | null>) {
 
   function handlePanoramaPositionChange(updateLocation: boolean) {
     panoPositionChanging.value = true
+    streetViewLoading.value = true
     const position = panorama!.getPosition()
     if (position) {
       const panoLonLat = [position.lng(), position.lat()]
@@ -257,6 +265,8 @@ export default function useStreeView(streetViewDiv: Ref<HTMLElement | null>) {
         map.getView().setCenter(loc)
       }
     }
-    nextTick(() => (panoPositionChanging.value = false))
+    nextTick(() => {
+      panoPositionChanging.value = false
+    })
   }
 }
diff --git a/src/stores/info.store.ts b/src/stores/info.store.ts
@@ -9,6 +9,7 @@ export const useInfoStore = defineStore('info', () => {
   const hidePointer: Ref<boolean> = ref(false)
   const isStreetviewActive: Ref<boolean> = ref(false)
   const noDataAtLocation = ref(true)
+  const streetViewLoading: Ref<boolean> = ref(false)
   const panoPositionChanging: Ref<boolean> = ref(false)
   const svFeature: Ref<SvFeature | undefined> = ref(undefined)
   const routingFeatureTemp: Ref<Feature | undefined> = ref(undefined)
@@ -18,6 +19,7 @@ export const useInfoStore = defineStore('info', () => {
     hidePointer,
     isStreetviewActive,
     noDataAtLocation,
+    streetViewLoading,
     panoPositionChanging,
     svFeature,
     routingFeatureTemp,