Merge branch...

Merge branch '202592-migrate-fa-spinner-to-spinner-for-app-views-admin-application_settings' into 'master'

Migrate '.fa-spinner' to '.spinner' for admin/application_settings

Closes #202592

See merge request gitlab-org/gitlab!24880

app/assets/javascripts/pages/admin/application_settings/usage_ping_payload.js

@@ -26,18 +26,18 @@ export default class UsagePingPayload {
   requestPayload() {
     if (this.isInserted) return this.showPayload();
 
-    this.spinner.classList.add('d-inline');
+    this.spinner.classList.add('d-inline-flex');
 
     return axios
       .get(this.container.dataset.endpoint, {
         responseType: 'text',
       })
       .then(({ data }) => {
-        this.spinner.classList.remove('d-inline');
+        this.spinner.classList.remove('d-inline-flex');
         this.insertPayload(data);
       })
       .catch(() => {
-        this.spinner.classList.remove('d-inline');
+        this.spinner.classList.remove('d-inline-flex');
         flash(__('Error fetching usage ping data.'));
       });
   }

app/assets/stylesheets/framework/spinner.scss

@@ -49,3 +49,9 @@
     @include spinner-color($white);
   }
 }
+
+.btn {
+  .spinner {
+    vertical-align: text-bottom;
+  }
+}

app/views/admin/application_settings/_usage.html.haml

@@ -26,7 +26,7 @@
             %p.mb-2= s_('%{usage_ping_link_start}Learn more%{usage_ping_link_end} about what information is shared with GitLab Inc.').html_safe % { usage_ping_link_start: usage_ping_link_start, usage_ping_link_end: '</a>'.html_safe }
 
             %button.btn.js-usage-ping-payload-trigger{ type: 'button' }
-              .js-spinner.d-none= icon('spinner spin')
+              .spinner.js-spinner.d-none
               .js-text.d-inline= _('Preview payload')
             %pre.usage-data.js-usage-ping-payload.js-syntax-highlight.code.highlight.mt-2.d-none{ data: { endpoint: usage_data_admin_application_settings_path(format: :html) } }
           - else