Use new spinner in admin/application_settings

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/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