Add isLoading prop to design item.vue

For clarity, isLoading is now a prop on an item,
rather than this value being determined within the
component from other state.

Tests updated to reflect this.

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

@@ -36,11 +36,13 @@ export default {
       required: false,
       default: null,
     },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
-    isLoading() {
-      return !this.image;
-    },
     icon() {
       const normalizedEvent = this.event.toLowerCase();
       const icons = {

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

@@ -189,12 +189,11 @@ export default {
     isDesignSelected(filename) {
       return this.selectedDesigns.includes(filename);
     },
+    isDesignToBeSaved(filename) {
+      return this.filesToBeSaved.some(file => file.name === filename);
+    },
     canSelectDesign(filename) {
-      return (
-        this.isLatestVersion &&
-        this.canCreateDesign &&
-        !this.filesToBeSaved.some(file => file.name === filename)
-      );
+      return this.isLatestVersion && this.canCreateDesign && !this.isDesignToBeSaved(filename);
     },
     onDesignDelete() {
       this.selectedDesigns = [];
@@ -250,7 +249,7 @@ export default {
       </div>
       <ol v-else-if="hasDesigns" class="list-unstyled row">
         <li v-for="design in designs" :key="design.id" class="col-md-6 col-lg-4 mb-3">
-          <design v-bind="design" />
+          <design v-bind="design" :is-loading="isDesignToBeSaved(design.filename)" />
           <input
             v-if="canSelectDesign(design.filename)"
             :checked="isDesignSelected(design.filename)"

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

@@ -28,7 +28,8 @@ describe('Design management list item component', () => {
       propsData: {
         id: 1,
         filename: 'test',
-        image: isLoading ? '' : 'http://via.placeholder.com/300',
+        image: 'http://via.placeholder.com/300',
+        isLoading,
         event,
         notesCount,
         updatedAt: '01-01-2019',
@@ -86,7 +87,7 @@ describe('Design management list item component', () => {
       expect(wrapper.element).toMatchSnapshot();
     });
 
-    it('renders loading spinner when no image prop present', () => {
+    it('renders loading spinner when isLoading is true', () => {
       createComponent({ notesCount: 0, isLoading: true });
 
       expect(wrapper.element).toMatchSnapshot();