Merge branch 'tq/loading-spinner-on-load-for-design-images' into 'master'

Show spinner on Design Card images when loading

See merge request gitlab-org/gitlab!27475

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

@@ -37,12 +37,17 @@ export default {
       required: false,
       default: null,
     },
-    isLoading: {
+    isUploading: {
       type: Boolean,
       required: false,
-      default: false,
+      default: true,
     },
   },
+  data() {
+    return {
+      imageLoading: true,
+    };
+  },
   computed: {
     icon() {
       const normalizedEvent = this.event.toLowerCase();
@@ -69,6 +74,14 @@ export default {
     notesLabel() {
       return n__('%d comment', '%d comments', this.notesCount);
     },
+    showLoadingSpinner() {
+      return this.imageLoading || this.isUploading;
+    },
+  },
+  methods: {
+    onImageLoad() {
+      this.imageLoading = false;
+    },
   },
   DESIGN_ROUTE_NAME,
 };
@@ -89,13 +102,14 @@ export default {
           <icon :name="icon.name" :size="18" :class="icon.classes" />
         </span>
       </div>
-      <gl-loading-icon v-if="isLoading" size="md" />
+      <gl-loading-icon v-show="showLoadingSpinner" size="md" />
       <img
-        v-else
+        v-show="!showLoadingSpinner"
         :src="image"
         :alt="filename"
         class="block ml-auto mr-auto mw-100 mh-100 design-img"
         data-qa-selector="design_image"
+        @load="onImageLoad"
       />
     </div>
     <div class="card-footer d-flex w-100">

ee/app/assets/javascripts/design_management/pages/index.vue

@@ -270,7 +270,7 @@ export default {
         </li>
         <li v-for="design in designs" :key="design.id" class="col-md-6 col-lg-4 mb-3">
           <design-dropzone @change="onExistingDesignDropzoneChange($event, design.filename)"
-            ><design v-bind="design" :is-loading="isDesignToBeSaved(design.filename)"
+            ><design v-bind="design" :is-uploading="isDesignToBeSaved(design.filename)"
           /></design-dropzone>
 
           <input

ee/changelogs/unreleased/tq-loading-spinner-on-load-for-design-images.yml

+---
+title: Display loading spinner when Design Card images are loading
+merge_request: 27475
+author:
+type: added

ee/spec/features/projects/issues/design_management/user_views_designs_with_svg_xss_spec.rb

@@ -29,7 +29,7 @@ describe 'User views an SVG design that contains XSS', :js do
   end
 
   it 'displays the SVG' do
-    expect(page).to have_selector("img.design-img[alt='xss.svg']", count: 1)
+    expect(page).to have_selector("img.design-img[alt='xss.svg']", count: 1, visible: false)
   end
 
   it 'does not execute the JavaScript within the SVG' do

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

@@ -23,6 +23,13 @@ exports[`Design management list item component with no notes renders item with c
       </span>
     </div>
      
+    <gl-loading-icon-stub
+      color="orange"
+      label="Loading"
+      size="md"
+      style="display: none;"
+    />
+     
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"
@@ -85,6 +92,13 @@ exports[`Design management list item component with no notes renders item with c
       </span>
     </div>
      
+    <gl-loading-icon-stub
+      color="orange"
+      label="Loading"
+      size="md"
+      style="display: none;"
+    />
+     
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"
@@ -147,6 +161,13 @@ exports[`Design management list item component with no notes renders item with c
       </span>
     </div>
      
+    <gl-loading-icon-stub
+      color="orange"
+      label="Loading"
+      size="md"
+      style="display: none;"
+    />
+     
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"
@@ -196,6 +217,13 @@ exports[`Design management list item component with no notes renders item with n
   >
     <!---->
      
+    <gl-loading-icon-stub
+      color="orange"
+      label="Loading"
+      size="md"
+      style="display: none;"
+    />
+     
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"
@@ -235,7 +263,7 @@ exports[`Design management list item component with no notes renders item with n
 </router-link-stub>
 `;
 
-exports[`Design management list item component with no notes renders loading spinner when isLoading is true 1`] = `
+exports[`Design management list item component with no notes renders loading spinner when isUploading is true 1`] = `
 <router-link-stub
   class="card cursor-pointer text-plain js-design-list-item design-list-item"
   to="[object Object]"
@@ -250,6 +278,14 @@ exports[`Design management list item component with no notes renders loading spi
       label="Loading"
       size="md"
     />
+     
+    <img
+      alt="test"
+      class="block ml-auto mr-auto mw-100 mh-100 design-img"
+      data-qa-selector="design_image"
+      src="http://via.placeholder.com/300"
+      style="display: none;"
+    />
   </div>
    
   <div
@@ -293,6 +329,13 @@ exports[`Design management list item component with notes renders item with mult
   >
     <!---->
      
+    <gl-loading-icon-stub
+      color="orange"
+      label="Loading"
+      size="md"
+      style="display: none;"
+    />
+     
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"
@@ -359,6 +402,13 @@ exports[`Design management list item component with notes renders item with sing
   >
     <!---->
      
+    <gl-loading-icon-stub
+      color="orange"
+      label="Loading"
+      size="md"
+      style="display: none;"
+    />
+     
     <img
       alt="test"
       class="block ml-auto mr-auto mw-100 mh-100 design-img"

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

@@ -19,7 +19,8 @@ describe('Design management list item component', () => {
   function createComponent({
     notesCount = 0,
     event = DESIGN_VERSION_EVENT.NO_CHANGE,
-    isLoading = false,
+    isUploading = false,
+    imageLoading = false,
   } = {}) {
     wrapper = shallowMount(Item, {
       localVue,
@@ -28,11 +29,16 @@ describe('Design management list item component', () => {
         id: 1,
         filename: 'test',
         image: 'http://via.placeholder.com/300',
-        isLoading,
+        isUploading,
         event,
         notesCount,
         updatedAt: '01-01-2019',
       },
+      data() {
+        return {
+          imageLoading,
+        };
+      },
       stubs: ['router-link'],
     });
   }
@@ -80,8 +86,8 @@ describe('Design management list item component', () => {
       expect(wrapper.element).toMatchSnapshot();
     });
 
-    it('renders loading spinner when isLoading is true', () => {
-      createComponent({ isLoading: true });
+    it('renders loading spinner when isUploading is true', () => {
+      createComponent({ isUploading: true });
 
       expect(wrapper.element).toMatchSnapshot();
     });