Merge branch 'fix-design-item-loading-on-scroll' into 'master'

Fix imageLoading bug when scrolling back to design

See merge request gitlab-org/gitlab!29223

ee/app/assets/javascripts/design_management/components/list/item.vue

@@ -54,7 +54,7 @@ export default {
     return {
       imageLoading: true,
       imageError: false,
-      isInView: false,
+      wasInView: false,
     };
   },
   computed: {
@@ -84,13 +84,13 @@ export default {
       return n__('%d comment', '%d comments', this.notesCount);
     },
     imageLink() {
-      return this.isInView ? this.imageV432x230 || this.image : '';
+      return this.wasInView ? this.imageV432x230 || this.image : '';
     },
     showLoadingSpinner() {
       return this.imageLoading || this.isUploading;
     },
     showImageErrorIcon() {
-      return this.imageError && this.isInView;
+      return this.wasInView && this.imageError;
     },
     showImage() {
       return !this.showLoadingSpinner && !this.showImageErrorIcon;
@@ -106,7 +106,13 @@ export default {
       this.imageError = true;
     },
     onAppear() {
-      this.isInView = true;
+      // do nothing if image has previously
+      // been in view
+      if (this.wasInView) {
+        return;
+      }
+
+      this.wasInView = true;
       this.imageLoading = true;
     },
   },

ee/changelogs/unreleased/fix-design-item-loading-on-scroll.yml

+---
+title: Fix imageLoading bug when scrolling back to design
+merge_request: 29223
+author:
+type: fixed

ee/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Design management list item component when item appears in view renders media broken icon when image onerror triggered 1`] = `
+exports[`Design management list item component when item appears in view after image is loaded renders media broken icon when image onerror triggered 1`] = `
 <gl-icon-stub
   class="text-secondary"
   name="media-broken"

ee/spec/frontend/design_management/components/list/item_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { GlIcon, GlIntersectionObserver } from '@gitlab/ui';
+import { GlIcon, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
 import VueRouter from 'vue-router';
 import Item from 'ee/design_management/components/list/item.vue';
 
@@ -60,19 +60,34 @@ describe('Design management list item component', () => {
 
   describe('when item appears in view', () => {
     let image;
+    let glIntersectionObserver;
 
     beforeEach(() => {
       createComponent();
       image = wrapper.find('img');
+      glIntersectionObserver = wrapper.find(GlIntersectionObserver);
 
       expect(image.attributes('src')).toBe('');
 
-      wrapper.find(GlIntersectionObserver).vm.$emit('appear');
+      glIntersectionObserver.vm.$emit('appear');
+      return wrapper.vm.$nextTick();
+    });
+
+    describe('before image is loaded', () => {
+      it('renders loading spinner', () => {
+        expect(wrapper.find(GlLoadingIcon)).toExist();
+      });
+    });
+
+    describe('after image is loaded', () => {
+      beforeEach(() => {
+        image.trigger('load');
         return wrapper.vm.$nextTick();
       });
 
       it('renders an image', () => {
         expect(image.attributes('src')).toBe('http://via.placeholder.com/300');
+        expect(image.isVisible()).toBe(true);
       });
 
       it('renders media broken icon when image onerror triggered', () => {
@@ -93,6 +108,18 @@ describe('Design management list item component', () => {
           });
         });
       });
+
+      describe('when image disappears from view and then reappears', () => {
+        beforeEach(() => {
+          glIntersectionObserver.vm.$emit('appear');
+          return wrapper.vm.$nextTick();
+        });
+
+        it('renders an image', () => {
+          expect(image.isVisible()).toBe(true);
+        });
+      });
+    });
   });
 
   describe('with notes', () => {