loading text

components/GalleryImageViewer.vue

@@ -8,9 +8,13 @@
            :style="backgroundStyle"
       ></div>
     </transition>
-    <div class="image-container">
+    <div class="image-container loading-container">
       <transition name="trans-bg-image">
-        <img v-if="showLoading" class="image" :src="loadingImageUrl">
+        <span v-if="showLoading"
+              class="text-loading animation-pulse"
+        >
+          Loading
+        </span>
       </transition>
     </div>
     <div class="image-container">
@@ -99,6 +103,7 @@ export default {
   methods: {
     setImages(url) {
       this.displayImageUrl = null
+      this.showLoading = false
       this.loadingTimeout = setTimeout(() => {
         this.showLoading = true
       }, 1000)
@@ -146,6 +151,21 @@ export default {
   box-shadow: 2px 4px 12px -2px rgba($color__neutral-200, .4);
 }
 
+.loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.text-loading {
+  font-size: 2rem;
+  color: $color__neutral-900;
+}
+
+.animation-pulse {
+  animation: pulse 3s infinite;
+}
+
 @media (max-width: $bp__layout) {
   .close-viewer {
     position: absolute;
@@ -227,6 +247,10 @@ export default {
     filter: blur(100px);
     opacity: .3;
   }
+
+  .loading-container {
+    padding-bottom: $gallery-thumbs-height;
+  }
 }
 
 .trans-image {
@@ -252,4 +276,14 @@ export default {
     opacity: 0;
   }
 }
+
+@keyframes pulse {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+
+  80% {
+    opacity: 0.1;
+  }
+}
 </style>