feat: Improve image loading for thumbnails (#5823)

app/javascript/dashboard/components/widgets/Thumbnail.spec.js

@@ -10,13 +10,14 @@ describe('Thumbnail.vue', () => {
       },
       data() {
         return {
+          hasImageLoaded: true,
           imgError: false,
         };
       },
     });
     expect(wrapper.find('.user-thumbnail').exists()).toBe(true);
     const avatarComponent = wrapper.findComponent(Avatar);
-    expect(avatarComponent.exists()).toBe(false);
+    expect(avatarComponent.isVisible()).toBe(false);
   });
 
   it('should render the avatar component if invalid image is passed', () => {
@@ -26,13 +27,14 @@ describe('Thumbnail.vue', () => {
       },
       data() {
         return {
+          hasImageLoaded: true,
           imgError: true,
         };
       },
     });
-    expect(wrapper.find('.avatar-container').exists()).toBe(true);
+    expect(wrapper.find('#image').exists()).toBe(false);
     const avatarComponent = wrapper.findComponent(Avatar);
-    expect(avatarComponent.exists()).toBe(true);
+    expect(avatarComponent.isVisible()).toBe(true);
   });
 
   it('should the initial of the name if no image is passed', () => {

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -1,13 +1,15 @@
 <template>
   <div :class="thumbnailBoxClass" :style="{ height: size, width: size }">
+    <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
     <img
-      v-if="!imgError && src"
+      v-show="shouldShowImage"
       :src="src"
       :class="thumbnailClass"
+      @load="onImgLoad"
       @error="onImgError"
     />
     <Avatar
-      v-else
+      v-show="!shouldShowImage"
       :username="userNameWithoutEmoji"
       :class="thumbnailClass"
       :size="avatarSize"
@@ -77,6 +79,7 @@ export default {
   },
   data() {
     return {
+      hasImageLoaded: false,
       imgError: false,
     };
   },
@@ -124,6 +127,15 @@ export default {
       const boxClass = this.variant === 'circle' ? 'is-rounded' : '';
       return `user-thumbnail-box ${boxClass}`;
     },
+    shouldShowImage() {
+      if (!this.src) {
+        return false;
+      }
+      if (this.hasImageLoaded) {
+        return !this.imgError;
+      }
+      return false;
+    },
   },
   watch: {
     src(value, oldValue) {
@@ -136,6 +148,9 @@ export default {
     onImgError() {
       this.imgError = true;
     },
+    onImgLoad() {
+      this.hasImageLoaded = true;
+    },
   },
 };
 </script>
@@ -159,6 +174,7 @@ export default {
     width: 100%;
     box-sizing: border-box;
     object-fit: cover;
+    vertical-align: initial;
 
     &.border {
       border: 1px solid white;