Use loading prop for design upload button

Instead of custom gl-icon placement,
use the loading prop go gl-button.

Tests are updated in this commit to
reflect this change.

app/assets/javascripts/design_management/components/upload/button.vue

 <script>
-import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { VALID_DESIGN_FILE_MIMETYPE } from '../../constants';
 
 export default {
   components: {
     GlButton,
-    GlLoadingIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -38,12 +37,12 @@ export default {
         )
       "
       :disabled="isSaving"
+      :loading="isSaving"
       variant="default"
       size="small"
       @click="openFileUpload"
     >
       {{ s__('DesignManagement|Upload designs') }}
-      <gl-loading-icon v-if="isSaving" inline class="ml-1" />
     </gl-button>
 
     <input

changelogs/unreleased/design-upload-button-loading-prop.yml

+---
+title: Use standard loading state for Design Upload button
+merge_request: 46292
+author:
+type: changed

spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap

@@ -15,40 +15,6 @@ exports[`Design management upload button component renders inverted upload desig
     
     Upload designs
   
-    <!---->
-  </gl-button-stub>
-   
-  <input
-    accept="image/*"
-    class="hide"
-    multiple="multiple"
-    name="design_file"
-    type="file"
-  />
-</div>
-`;
-
-exports[`Design management upload button component renders loading icon 1`] = `
-<div>
-  <gl-button-stub
-    buttontextclasses=""
-    category="primary"
-    disabled="true"
-    icon=""
-    size="small"
-    title="Adding a design with the same filename replaces the file in a new version."
-    variant="default"
-  >
-    
-    Upload designs
-    
-    <gl-loading-icon-stub
-      class="ml-1"
-      color="dark"
-      inline="true"
-      label="Loading"
-      size="sm"
-    />
   </gl-button-stub>
    
   <input
@@ -74,7 +40,6 @@ exports[`Design management upload button component renders upload design button
     
     Upload designs
   
-    <!---->
   </gl-button-stub>
    
   <input

spec/frontend/design_management/components/upload/button_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import UploadButton from '~/design_management/components/upload/button.vue';
 
 describe('Design management upload button component', () => {
   let wrapper;
 
-  function createComponent(isSaving = false, isInverted = false) {
+  function createComponent({ isSaving = false, isInverted = false } = {}) {
     wrapper = shallowMount(UploadButton, {
       propsData: {
         isSaving,
@@ -24,15 +25,19 @@ describe('Design management upload button component', () => {
   });
 
   it('renders inverted upload design button', () => {
-    createComponent(false, true);
+    createComponent({ isInverted: true });
 
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('renders loading icon', () => {
-    createComponent(true);
+  describe('when `isSaving` prop is `true`', () => {
+    it('Button `loading` prop is `true`', () => {
+      createComponent({ isSaving: true });
 
-    expect(wrapper.element).toMatchSnapshot();
+      const button = wrapper.find(GlButton);
+      expect(button.exists()).toBe(true);
+      expect(button.props('loading')).toBe(true);
+    });
   });
 
   describe('onFileUploadChange', () => {