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,36 +60,63 @@ 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();
     });
 
-    it('renders an image', () => {
-      expect(image.attributes('src')).toBe('http://via.placeholder.com/300');
+    describe('before image is loaded', () => {
+      it('renders loading spinner', () => {
+        expect(wrapper.find(GlLoadingIcon)).toExist();
+      });
     });
 
-    it('renders media broken icon when image onerror triggered', () => {
-      image.trigger('error');
-      return wrapper.vm.$nextTick().then(() => {
-        expect(image.isVisible()).toBe(false);
-        expect(wrapper.find(GlIcon).element).toMatchSnapshot();
+    describe('after image is loaded', () => {
+      beforeEach(() => {
+        image.trigger('load');
+        return wrapper.vm.$nextTick();
       });
-    });
 
-    describe('when imageV432x230 and image provided', () => {
-      it('renders imageV432x230 image', () => {
-        const mockSrc = 'mock-imageV432x230-url';
-        wrapper.setProps({ imageV432x230: mockSrc });
+      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', () => {
+        image.trigger('error');
         return wrapper.vm.$nextTick().then(() => {
-          expect(image.attributes('src')).toBe(mockSrc);
+          expect(image.isVisible()).toBe(false);
+          expect(wrapper.find(GlIcon).element).toMatchSnapshot();
+        });
+      });
+
+      describe('when imageV432x230 and image provided', () => {
+        it('renders imageV432x230 image', () => {
+          const mockSrc = 'mock-imageV432x230-url';
+          wrapper.setProps({ imageV432x230: mockSrc });
+
+          return wrapper.vm.$nextTick().then(() => {
+            expect(image.attributes('src')).toBe(mockSrc);
+          });
+        });
+      });
+
+      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);
         });
       });
     });