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,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', () => {