naive handling of preventing image changes during already running transiiton

components/BackgroundImageLoader.vue

@@ -2,14 +2,18 @@
   <div class="background-image-loader">
     <div class="background-container">
       <div class="background background-default"></div>
-      <transition name="fade-fast">
+      <transition name="fade-fast"
+      >
         <div v-if="loadedImageUrl !== null"
              class="background background-img background-blur"
              :style="backgroundBlurStyle"
         >
         </div>
       </transition>
-      <transition name="fade">
+      <transition name="fade"
+                  @beforeEnter="handleBeforeEnter"
+                  @afterLeave="handleAfterLeave"
+      >
         <div class="background background-img"
              :key="loadedImageUrl"
              :style="backgroundStyle"
@@ -41,6 +45,8 @@ export default {
   data () {
     return {
       loadedImageUrl: null,
+      isInTransition: false,
+      transitionTimeout: null,
     }
   },
 
@@ -66,7 +72,7 @@ export default {
 
   watch: {
     imageUrl () {
-      if (this.imageUrl) {
+      if (!this.isInTransition && this.imageUrl) {
         this.setImage(this.imageUrl)
       }
     },
@@ -88,6 +94,25 @@ export default {
           this.$emit('imageLoadError', err)
         })
     },
+
+    handleBeforeEnter() {
+      // TOOD get the actual value programatically
+      let transitionDuration = 4000
+
+      this.isInTransition = true
+
+      clearTimeout(this.transitionTimeout)
+      this.transitionTimeout = setTimeout(() => {
+        this.isInTransition = false
+        if (this.imageUrl !== this.loadedImageUrl) {
+          this.setImage(this.imageUrl)
+        }
+      }, transitionDuration)
+    },
+
+    handleAfterLeave() {
+
+    }
   },
 }
 </script>