Capture onload event to get design card state

Uses `onload` state in addition to existing `isLoading`
prop to determine when to show loading spinner

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

@@ -43,6 +43,11 @@ export default {
       default: false,
     },
   },
+  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/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"
@@ -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

@@ -20,6 +20,7 @@ describe('Design management list item component', () => {
     notesCount = 0,
     event = DESIGN_VERSION_EVENT.NO_CHANGE,
     isLoading = false,
+    imageLoading = false,
   } = {}) {
     wrapper = shallowMount(Item, {
       localVue,
@@ -33,6 +34,11 @@ describe('Design management list item component', () => {
         notesCount,
         updatedAt: '01-01-2019',
       },
+      data() {
+        return {
+          imageLoading,
+        };
+      },
       stubs: ['router-link'],
     });
   }