Merge branch '353743-spinner-new-branch' into 'master'

Make spinner pajamas compliant for new branch

See merge request gitlab-org/gitlab!83426

app/assets/javascripts/issues/create_merge_request_dropdown.js

@@ -43,7 +43,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.unavailableButtonSpinner = this.unavailableButton.querySelector('.gl-spinner');
+    this.unavailableButtonSpinner = this.unavailableButton.querySelector('.js-create-mr-spinner');
     this.unavailableButtonText = this.unavailableButton.querySelector('.text');
 
     this.branchCreated = false;
@@ -462,10 +462,10 @@ export default class CreateMergeRequestDropdown {
 
   setUnavailableButtonState(isLoading = true) {
     if (isLoading) {
-      this.unavailableButtonSpinner.classList.remove('hide');
+      this.unavailableButtonSpinner.classList.remove('gl-display-none');
       this.unavailableButtonText.textContent = __('Checking branch availability...');
     } else {
-      this.unavailableButtonSpinner.classList.add('hide');
+      this.unavailableButtonSpinner.classList.add('gl-display-none');
       this.unavailableButtonText.textContent = __('New branch unavailable');
     }
   }

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

@@ -13,13 +13,13 @@
   .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.unavailable
       %button.gl-button.btn{ type: 'button', disabled: 'disabled' }
-        .gl-spinner.align-text-bottom.gl-button-icon.hide
+        = gl_loading_icon(inline: true, css_class: 'js-create-mr-spinner gl-button-icon gl-display-none')
         %span.text
           Checking branch availability…
 
     .btn-group.available.hidden
       %button.gl-button.btn.js-create-merge-request.btn-confirm{ type: 'button', data: { action: data_action } }
-        .gl-spinner.js-spinner.gl-mr-2.gl-display-none
+        = gl_loading_icon(css_class: 'js-create-mr-spinner js-spinner gl-mr-2 gl-display-none')
         = value
 
       %button.gl-button.btn.btn-confirm.btn-icon.dropdown-toggle.create-merge-request-dropdown-toggle.js-dropdown-toggle{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }

spec/frontend/issues/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="gl-spinner"></div>
+          <div class="js-create-mr-spinner"></div>
           <div class="text"></div>
         </div>
         <div class="js-ref"></div>