diff --git a/app/assets/javascripts/create_merge_request_dropdown.js b/app/assets/javascripts/create_merge_request_dropdown.js
index dcc98f8641045c8b39fce9f0e70f6d3291a30d32..50c32b9c4bfc80820d2aaf6bd52791792e54b4d8 100644
--- a/app/assets/javascripts/create_merge_request_dropdown.js
+++ b/app/assets/javascripts/create_merge_request_dropdown.js
@@ -35,6 +35,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');
@@ -179,6 +180,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');
@@ -387,8 +392,10 @@ export default class CreateMergeRequestDropdown {
       this.isCreatingBranch = false;
 
       this.enable();
+      this.setLoading(false);
     });
 
+    this.setLoading(true);
     this.disable();
   }
 
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index d299d2846c6c9d7aa60dec13f8ec271be669fe8e..15685291cdea69f6cd83e0b6763be44cb5821582 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/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' } }
diff --git a/changelogs/unreleased/ph-296784-createMRButtonLoadingIcon.yml b/changelogs/unreleased/ph-296784-createMRButtonLoadingIcon.yml
new file mode 100644
index 0000000000000000000000000000000000000000..85346b6bc3aa1ab0815237416afcee3d8bbb4afc
--- /dev/null
+++ b/changelogs/unreleased/ph-296784-createMRButtonLoadingIcon.yml
@@ -0,0 +1,5 @@
+---
+title: Add loading icon to create merge request button
+merge_request: 57105
+author:
+type: changed
diff --git a/spec/frontend/create_merge_request_dropdown_spec.js b/spec/frontend/create_merge_request_dropdown_spec.js
index 08c05c6ec389e7caaf6bdf6109f60dc62fe8f407..b4c13981dd5720396404d714d250c06704edefb9 100644
--- a/spec/frontend/create_merge_request_dropdown_spec.js
+++ b/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,
+      );
+    });
+  });
 });