update: transitions (with bug)

components/GalleryImageViewer.vue

@@ -1,12 +1,18 @@
 <template>
   <div class="image-viewer"
        :class="{ 'is-visible': isVisible }">
-    <div class="viewer-background"
-         :style="backgroundStyle">
+    <transition name="trans-bg-image" mode="out-in">
+      <div v-show="backgroundImageUrl" class="viewer-background" :style="backgroundStyle"></div>
+    </transition>
+    <div class="image-container">
+      <transition name="trans-bg-image">
+        <img v-if="showLoading" class="image" :src="loadingImageUrl">
+      </transition>
     </div>
     <div class="image-container">
-      <img class="image"
-           :src="imageUrl">
+      <transition name="trans-image" mode="out-in">
+        <img v-if="displayImageUrl" :key="displayImageUrl" class="image" :src="displayImageUrl">
+      </transition>
     </div>
     <div class="close-viewer mobile-only"
          @click="$emit('close')">
@@ -54,19 +60,64 @@ export default {
 
   data () {
     return {
+      loadingImageUrl: 'https://via.placeholder.com/120x120',
+      backgroundImageUrl: null,
+      displayImageUrl: null,
+      showLoading: true,
+      loadingTimeout: null
     }
   },
 
   computed: {
     backgroundStyle () {
       return {
-        backgroundImage: 'url(' + this.imageUrl + ')'
+        backgroundImage: 'url(' + this.backgroundImageUrl + ')'
       }
     }
   },
 
-  methods: {
+  watch: {
+    imageUrl () {
+      this.setImages(this.imageUrl)
     }
+  },
+
+  mounted () {
+    this.setImages(this.imageUrl)
+  },
+
+  methods: {
+    setImages(url) {
+      this.displayImageUrl = null
+      this.loadingTimeout = setTimeout(() => {
+        this.showLoading = true
+      }, 1000)
+      this.loadImage(this.imageUrl)
+        .then(img => {
+          this.displayImageUrl = img.src
+          clearTimeout(this.loadingTimeout)
+          this.showLoading = false
+          setTimeout(() => {
+            this.$nextTick(() => {
+              this.backgroundImageUrl = img.src
+            })
+          }, 200)
+        })
+        // TODO catch errors
+    },
+    loadImage(url) {
+      return new Promise( (resolve, reject) => {
+        const img = new Image()
+
+        img.addEventListener('load', e => resolve(img));
+        img.addEventListener('error', () => {
+          reject(new Error(`Failed to load image URL: ${url}`));
+        });
+
+        img.src = url;
+      })
+    }
+  },
 }
 </script>
 
@@ -169,4 +220,21 @@ export default {
     opacity: .3;
   }
 }
+
+.trans-image-enter-active, .trans-image-leave-active {
+  transition: opacity 5s;
+}
+
+.trans-image-enter, .trans-image-leave-to {
+  opacity: 0;
+}
+
+
+.trans-bg-image-enter-active, .trans-bg-image-leave-active {
+  transition: opacity 1s;
+}
+
+.trans-bg-image-enter, .trans-bg-image-leave-to {
+  opacity: 0;
+}
 </style>