Added loading icon to create merge request button

Adds a loading icon to the create a merge request button on issues

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/296784

app/assets/javascripts/create_merge_request_dropdown.js

@@ -36,6 +36,7 @@ export default class CreateMergeRequestDropdown {
     this.branchInput = this.wrapperEl.querySelector('.js-branch-name');
     this.branchMessage = this.wrapperEl.querySelector('.js-branch-message');
     this.createMergeRequestButton = this.wrapperEl.querySelector('.js-create-merge-request');
+    this.createMergeRequestLoading = this.createMergeRequestButton.querySelector('.js-spinner');
     this.createTargetButton = this.wrapperEl.querySelector('.js-create-target');
     this.dropdownList = this.wrapperEl.querySelector('.dropdown-menu');
     this.dropdownToggle = this.wrapperEl.querySelector('.js-dropdown-toggle');
@@ -170,6 +171,10 @@ export default class CreateMergeRequestDropdown {
     this.disableCreateAction();
   }
 
+  setLoading(loading) {
+    this.createMergeRequestLoading.classList.toggle('gl-display-none', !loading);
+  }
+
   disableCreateAction() {
     this.createMergeRequestButton.classList.add('disabled');
     this.createMergeRequestButton.setAttribute('disabled', 'disabled');
@@ -376,8 +381,10 @@ export default class CreateMergeRequestDropdown {
       this.isCreatingBranch = false;
 
       this.enable();
+      this.setLoading(false);
     });
 
+    this.setLoading(true);
     this.disable();
   }
 

app/views/projects/issues/_new_branch.html.haml

@@ -18,7 +18,8 @@
           Checking branch availability…
 
     .btn-group.btn-group-sm.available.hidden
-      %button.btn.js-create-merge-request.btn-success.btn-inverted{ type: 'button', data: { action: data_action } }
+      %button.gl-button.btn.js-create-merge-request.btn-success.btn-inverted{ type: 'button', data: { action: data_action } }
+        .spinner.js-spinner.gl-mr-2.gl-display-none
         = value
 
       %button.btn.gl-button.create-merge-request-dropdown-toggle.dropdown-toggle.btn-success.btn-inverted.js-dropdown-toggle.gl-flex-grow-0.gl-h-7{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }

changelogs/unreleased/ph-296784-createMRButtonLoadingIcon.yml

+---
+title: Add loading icon to create merge request button
+merge_request:
+author:
+type: changed

spec/frontend/create_merge_request_dropdown_spec.js

@@ -20,7 +20,9 @@ describe('CreateMergeRequestDropdown', () => {
         </div>
         <div class="js-ref"></div>
         <div class="js-create-mr"></div>
-        <div class="js-create-merge-request"></div>
+        <div class="js-create-merge-request">
+          <span class="js-spinner"></span>
+        </div>
         <div class="js-create-target"></div>
         <div class="js-dropdown-toggle"></div>
       </div>
@@ -100,4 +102,18 @@ describe('CreateMergeRequestDropdown', () => {
       expect(dropdown.createMergeRequestButton.classList).toContain('disabled');
     });
   });
+
+  describe('setLoading', () => {
+    it.each`
+      loading  | hasClass
+      ${true}  | ${false}
+      ${false} | ${true}
+    `('it toggle loading spinner when loading is $loading', ({ loading, hasClass }) => {
+      dropdown.setLoading(loading);
+
+      expect(document.querySelector('.js-spinner').classList.contains('gl-display-none')).toEqual(
+        hasClass,
+      );
+    });
+  });
 });