Fix imageLoading bug when scrolling back to design

imageLoading was being set incorrectly (every time the item appeared).
This meant that even if the image was not loading, the loading
spinner would appear if the image appeared in view again.

This commit changes the logic so that we only set imageLoading if the
image has never appeared in view.

This commit also adds and reorganises some tests to ensure this path is
covered.

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);
         });
       });
     });