Resolve "Migrate '.fa-spinner' to '.spinner' for...

Resolve "Migrate '.fa-spinner' to '.spinner' for 'app/assets/javascripts/create_merge_request_dropdown.js'"

app/assets/javascripts/create_merge_request_dropdown.js

@@ -42,7 +42,7 @@ export default class CreateMergeRequestDropdown {
     this.refInput = this.wrapperEl.querySelector('.js-ref');
     this.refMessage = this.wrapperEl.querySelector('.js-ref-message');
     this.unavailableButton = this.wrapperEl.querySelector('.unavailable');
-    this.unavailableButtonArrow = this.unavailableButton.querySelector('.fa');
+    this.unavailableButtonArrow = this.unavailableButton.querySelector('.spinner');
     this.unavailableButtonText = this.unavailableButton.querySelector('.text');
 
     this.branchCreated = false;
@@ -417,13 +417,11 @@ export default class CreateMergeRequestDropdown {
 
   setUnavailableButtonState(isLoading = true) {
     if (isLoading) {
-      this.unavailableButtonArrow.classList.add('fa-spin');
-      this.unavailableButtonArrow.classList.add('fa-spinner');
+      this.unavailableButtonArrow.classList.remove('hide');
       this.unavailableButtonArrow.classList.remove('fa-exclamation-triangle');
       this.unavailableButtonText.textContent = __('Checking branch availability...');
     } else {
-      this.unavailableButtonArrow.classList.remove('fa-spin');
-      this.unavailableButtonArrow.classList.remove('fa-spinner');
+      this.unavailableButtonArrow.classList.add('hide');
       this.unavailableButtonArrow.classList.add('fa-exclamation-triangle');
       this.unavailableButtonText.textContent = __('New branch unavailable');
     }

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

@@ -13,7 +13,7 @@
   .create-mr-dropdown-wrap.d-inline-block.full-width-mobile.js-create-mr{ data: { project_path: @project.full_path, project_id: @project.id, can_create_path: can_create_path, create_mr_path: create_mr_path, create_branch_path: create_branch_path, refs_path: refs_path, is_confidential: can_create_confidential_merge_request?.to_s } }
     .btn-group.btn-group-sm.unavailable
       %button.btn.btn-grouped{ type: 'button', disabled: 'disabled' }
-        = icon('spinner', class: 'fa-spin')
+        .spinner.align-text-bottom.mr-1.hide
         %span.text
           Checking branch availability…
 

changelogs/unreleased/rk4bir-master-patch-85217.yml

+---
+title: Migrated from .fa-spinner to .spinner in app/assets/javascripts/create_merge_request_dropdown.js
+merge_request: 24917
+author: Raihan Kabir (gitlab/rk4bir)
+type: changed

spec/frontend/create_merge_request_dropdown_spec.js

@@ -15,7 +15,7 @@ describe('CreateMergeRequestDropdown', () => {
       <div id="dummy-wrapper-element">
         <div class="available"></div>
         <div class="unavailable">
-          <div class="fa"></div>
+          <div class="spinner"></div>
           <div class="text"></div>
         </div>
         <div class="js-ref"></div>