Migrate spinner to use gl-spinner class

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/58706

Migrate spinner to use gl-spinner class
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/58706
f117aa36 · Jarek Ostrowski · bafa3cbe · f117aa36 · f117aa36 · f117aa36
Commit f117aa36 authored Apr 28, 2021 by Jarek Ostrowski
47 changed files
--- a/app/assets/javascripts/create_merge_request_dropdown.js
+++ b/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.unavailableButtonSpinner = this.unavailableButton.querySelector('.spinner');
+    this.unavailableButtonSpinner = this.unavailableButton.querySelector('.gl-spinner');
    this.unavailableButtonText = this.unavailableButton.querySelector('.text');
    this.branchCreated = false;

--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1732,7 +1732,7 @@ export default class Notes {
        // Submission failed, revert back to original note
        $noteBodyText.html(escape(cachedNoteBodyText));
        $editingNote.removeClass('being-posted fade-in');
-        $editingNote.find('.spinner').remove();
+        $editingNote.find('.gl-spinner').remove();
        // Show Flash message about failure
        this.updateNoteError();

--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -223,14 +223,14 @@ export default class UserTabs {
      .then((data) => UserTabs.renderActivityCalendar(data, $calendarWrap))
      .catch(() => {
        const cWrap = $calendarWrap[0];
-        cWrap.querySelector('.spinner').classList.add('invisible');
+        cWrap.querySelector('.gl-spinner').classList.add('invisible');
        cWrap.querySelector('.user-calendar-error').classList.remove('invisible');
        cWrap
          .querySelector('.user-calendar-error .js-retry-load')
          .addEventListener('click', (e) => {
            e.preventDefault();
            cWrap.querySelector('.user-calendar-error').classList.add('invisible');
-            cWrap.querySelector('.spinner').classList.remove('invisible');
+            cWrap.querySelector('.gl-spinner').classList.remove('invisible');
            this.loadActivityCalendar();
          });
      });

--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -337,7 +337,7 @@
 .btn-loading {
  &:not(.disabled) {
-    .spinner {
+    .gl-spinner {
      display: none;
    }
  }

--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -147,7 +147,7 @@
    position: absolute;
  }
-  .spinner {
+  .gl-spinner {
    position: absolute;
    top: 9px;
    right: 8px;

--- a/app/assets/stylesheets/framework/editor-lite.scss
+++ b/app/assets/stylesheets/framework/editor-lite.scss
@@ -11,7 +11,7 @@
  &::before {
    content: '';
-    @include spinner(32px, 3px);
+    @include spinner-deprecated(32px, 3px);
    @include gl-absolute;
    @include gl-z-index-1;
  }

--- a/app/assets/stylesheets/framework/spinner.scss
+++ b/app/assets/stylesheets/framework/spinner.scss
-@mixin spinner-color($color) {
+/**
+* Do not use these spinner mixins. Rely on GitLab UI
+* GlLoadingIcon component instead.
+*/
+@mixin spinner-color-deprecated($color) {
  border-color: rgba($color, 0.25);
  border-top-color: $color;
 }
-@mixin spinner-size($size, $border-width) {
+@mixin spinner-size-deprecated($size, $border-width) {
  width: $size;
  height: $size;
  border-width: $border-width;
  @include webkit-prefix(transform-origin, 50% 50% calc((#{$size} / 2) + #{$border-width}));
 }
-@keyframes spinner-rotate {
+@keyframes spinner-rotate-deprecated {
  0% {
    transform: rotate(0);
  }
@@ -20,47 +24,16 @@
  }
 }
-@mixin spinner($size: 16px, $border-width: 2px, $color: $gray-700) {
+@mixin spinner-deprecated($size: 16px, $border-width: 2px, $color: $gray-700) {
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
-  animation-name: spinner-rotate;
+  animation-name: spinner-rotate-deprecated;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  border-style: solid;
  display: inline-flex;
-  @include spinner-size($size, $border-width);
+  @include spinner-size-deprecated($size, $border-width);
-  @include spinner-color($color);
+  @include spinner-color-deprecated($color);
-}
-.spinner {
-  @include spinner;
-  &.spinner-md {
-    @include spinner-size(32px, 3px);
-  }
-  &.spinner-lg {
-    @include spinner-size(64px, 4px);
-  }
-  &.spinner-dark {
-    @include spinner-color($gray-700);
-  }
-  &.spinner-light {
-    @include spinner-color($white);
-  }
-}
-.btn {
-  .spinner,
-  .gl-spinner {
-    vertical-align: text-bottom;
-  }
-}
-.spin {
-  animation: spinner-rotate 2s infinite linear;
 }
--- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
+++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
@@ -151,7 +151,7 @@
        background-color: var(--gray-50, $gray-50);
      }
-      .spinner,
+      .gl-spinner,
      svg {
        width: $ci-action-dropdown-svg-size;
        height: $ci-action-dropdown-svg-size;

--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -409,7 +409,7 @@
        fill: var(--gray-500, $gray-500);
      }
-      .spinner {
+      .gl-spinner {
        top: 2px;
      }

--- a/app/views/admin/application_settings/_usage.html.haml
+++ b/app/views/admin/application_settings/_usage.html.haml
@@ -27,7 +27,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.gl-button.btn.btn-default.js-payload-preview-trigger{ type: 'button', data: { payload_selector: ".#{payload_class}" } }
-              .spinner.js-spinner.gl-display-none.gl-mr-2
+              .gl-spinner.js-spinner.gl-display-none.gl-mr-2
              .js-text.d-inline= _('Preview payload')
            %pre.usage-data.js-syntax-highlight.code.highlight.mt-2.d-none{ class: payload_class, data: { endpoint: usage_data_admin_application_settings_path(format: :html) } }
          - else

--- a/app/views/clusters/clusters/_banner.html.haml
+++ b/app/views/clusters/clusters/_banner.html.haml
@@ -3,7 +3,7 @@
  %p.js-error-reason
 .hidden.js-cluster-creating.bs-callout.bs-callout-info{ role: 'alert' }
-  %span.spinner.spinner-dark.spinner-sm{ 'aria-label': 'Loading' }
+  %span.gl-spinner.gl-spinner-dark{ 'aria-label': 'Loading' }
  %span.gl-ml-2= s_('ClusterIntegration|Kubernetes cluster is being created...')
 .hidden.row.js-cluster-api-unreachable.gl-alert.gl-alert-warning{ role: 'alert' }

--- a/app/views/dashboard/_activities.html.haml
+++ b/app/views/dashboard/_activities.html.haml
@@ -6,4 +6,4 @@
 .content_list
 .loading
-  .spinner.spinner-md
+  .gl-spinner.gl-spinner-md
--- a/app/views/dashboard/groups/_groups.html.haml
+++ b/app/views/dashboard/groups/_groups.html.haml
 .js-groups-list-holder
  #js-groups-tree{ data: { hide_projects: 'true', endpoint: dashboard_groups_path(format: :json), path: dashboard_groups_path, form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
    .loading-container.text-center.prepend-top-20
-      .spinner.spinner-md
+      .gl-spinner.gl-spinner-md
--- a/app/views/dashboard/todos/_todo.html.haml
+++ b/app/views/dashboard/todos/_todo.html.haml
@@ -50,12 +50,12 @@
    .todo-actions
      = link_to dashboard_todo_path(todo), method: :delete, class: 'gl-button btn btn-default btn-loading d-flex align-items-center js-done-todo', data: { href: dashboard_todo_path(todo) } do
        Done
-        %span.spinner.ml-1
+        %span.gl-spinner.ml-1
      = link_to restore_dashboard_todo_path(todo), method: :patch, class: 'gl-button btn btn-default btn-loading d-flex align-items-center js-undo-todo hidden', data: { href: restore_dashboard_todo_path(todo) } do
        Undo
-        %span.spinner.ml-1
+        %span.gl-spinner.ml-1
  - else
    .todo-actions
      = link_to restore_dashboard_todo_path(todo), method: :patch, class: 'gl-button btn btn-default btn-loading d-flex align-items-center js-add-todo', data: { href: restore_dashboard_todo_path(todo) } do
        Add a to do
-        %span.spinner.ml-1
+        %span.gl-spinner.ml-1
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -29,10 +29,10 @@
        .gl-mr-3
          = link_to destroy_all_dashboard_todos_path(todos_filter_params), class: 'gl-button btn btn-default btn-loading align-items-center js-todos-mark-all', method: :delete, data: { href: destroy_all_dashboard_todos_path(todos_filter_params) } do
            Mark all as done
-            %span.spinner.ml-1
+            %span.gl-spinner.ml-1
          = link_to bulk_restore_dashboard_todos_path, class: 'gl-button btn btn-default btn-loading align-items-center js-todos-undo-all hidden', method: :patch , data: { href: bulk_restore_dashboard_todos_path(todos_filter_params) } do
            Undo mark all as done
-            %span.spinner.ml-1
+            %span.gl-spinner.ml-1
  .todos-filters
    .issues-details-filters.row-content-block.second-block

--- a/app/views/explore/groups/_groups.html.haml
+++ b/app/views/explore/groups/_groups.html.haml
 .js-groups-list-holder
  #js-groups-tree{ data: { hide_projects: 'true', endpoint: explore_groups_path(format: :json), path: explore_groups_path, form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
    .loading-container.text-center.prepend-top-20
-      .spinner.spinner-md
+      .gl-spinner.gl-spinner-md
--- a/app/views/groups/_activities.html.haml
+++ b/app/views/groups/_activities.html.haml
@@ -6,4 +6,4 @@
 .content_list
 .loading
-  .spinner.spinner-md
+  .gl-spinner.gl-spinner-md
--- a/app/views/groups/_archived_projects.html.haml
+++ b/app/views/groups/_archived_projects.html.haml
@@ -5,4 +5,4 @@
  %ul.content-list{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
    .js-groups-list-holder
      .loading-container.text-center.prepend-top-20
-        .spinner.spinner-md
+        .gl-spinner.gl-spinner-md
--- a/app/views/groups/_shared_projects.html.haml
+++ b/app/views/groups/_shared_projects.html.haml
@@ -5,4 +5,4 @@
  %ul.content-list{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
    .js-groups-list-holder
      .loading-container.text-center.prepend-top-20
-        .spinner.spinner-md
+        .gl-spinner.gl-spinner-md
--- a/app/views/groups/_subgroups_and_projects.html.haml
+++ b/app/views/groups/_subgroups_and_projects.html.haml
@@ -5,4 +5,4 @@
  %section{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
    .js-groups-list-holder{ data: { show_schema_markup: 'true'} }
      .loading-container.text-center.prepend-top-20
-        .spinner.spinner-md
+        .gl-spinner.gl-spinner-md
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -64,19 +64,19 @@
      #tab-members.tab-pane{ class: ('active' unless invited_active) }
        .js-group-members-list{ data: group_members_list_data_attributes(@group, @members, { param_name: :page, params: { invited_members_page: nil, search_invited: nil } }) }
          .loading
-            .spinner.spinner-md
+            .gl-spinner.gl-spinner-md
      - if @group.shared_with_group_links.any?
        #tab-groups.tab-pane
          .js-group-group-links-list{ data: group_group_links_list_data_attributes(@group) }
            .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
      - if show_invited_members
        #tab-invited-members.tab-pane{ class: ('active' if invited_active) }
          .js-group-invited-members-list{ data: group_members_list_data_attributes(@group, @invited_members, { param_name: :invited_members_page, params: { page: nil } }) }
            .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
      - if show_access_requests
        #tab-access-requests.tab-pane
          .js-group-access-requests-list{ data: group_members_list_data_attributes(@group, @requesters) }
            .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
--- a/app/views/groups/imports/show.html.haml
+++ b/app/views/groups/imports/show.html.haml
@@ -4,7 +4,7 @@
 .save-group-loader
  .center
    %h2
-      %i.loading.spinner.spinner-sm
+      %i.loading.gl-spinner
      = page_title
    %p
      = s_('GroupImport|Please wait while we import the group for you. Refresh at will.')
--- a/app/views/ide/_show.html.haml
+++ b/app/views/ide/_show.html.haml
@@ -6,5 +6,5 @@
 #ide.ide-loading{ data: ide_data }
  .text-center
-    .spinner.spinner-md
+    .gl-spinner.gl-spinner-md
    %h2.clgray= _('Loading the GitLab IDE...')
--- a/app/views/projects/_activity.html.haml
+++ b/app/views/projects/_activity.html.haml
@@ -11,4 +11,4 @@
 .content_list.project-activity{ :"data-href" => activity_project_path(@project) }
 .loading
-  .spinner.spinner-md
+  .gl-spinner.gl-spinner-md
--- a/app/views/projects/blob/_upload.html.haml
+++ b/app/views/projects/blob/_upload.html.haml
@@ -21,7 +21,7 @@
          .form-actions
            = button_tag class: 'btn gl-button btn-confirm btn-upload-file', id: 'submit-all', type: 'button' do
-              .spinner.spinner-sm.gl-mr-2.js-loading-icon.hidden
+              .gl-spinner.gl-mr-2.js-loading-icon.hidden
              = button_title
            = link_to _("Cancel"), '#', class: "btn gl-button btn-default btn-cancel", "data-dismiss" => "modal"

--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -37,13 +37,13 @@
    - @commit.parents.each do |parent|
      = link_to parent.short_id, project_commit_path(@project, parent), class: "commit-sha"
    .commit-info.branches
-      .spinner.vertical-align-middle
+      .gl-spinner.vertical-align-middle
  .well-segment.merge-request-info
    .icon-container
      = custom_icon('mr_bold')
    %span.commit-info.merge-requests{ 'data-project-commit-path' => merge_requests_project_commit_path(@project, @commit.id, format: :json) }
-      .spinner.vertical-align-middle
+      .gl-spinner.vertical-align-middle
  - if can?(current_user, :read_pipeline, @last_pipeline)
    .well-segment.pipeline-info

--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -34,7 +34,7 @@
    - url = url_for(safe_params.merge(action: 'diff_files'))
    .js-diffs-batch{ data: { diff_files_path: url } }
      .text-center
-        %span.spinner.spinner-md
+        %span.gl-spinner.gl-spinner-md
  - else
    = render partial: 'projects/diffs/file', collection: diff_files, as: :diff_file, locals: { project: diffs.project, environment: environment, diff_page_context: diff_page_context }

--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -106,7 +106,7 @@
 .save-project-loader.hide
  .center
    %h2
-      .spinner.spinner-md.align-text-bottom
+      .gl-spinner.gl-spinner-md.align-text-bottom
      = _('Saving project.')
    %p= _('Please wait a moment, this page will automatically refresh when ready.')

--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/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' }
-        .spinner.align-text-bottom.gl-button-icon.hide
+        .gl-spinner.align-text-bottom.gl-button-icon.hide
        %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 } }
-        .spinner.js-spinner.gl-mr-2.gl-display-none
+        .gl-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' } }

--- a/app/views/projects/merge_requests/creations/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_compare.html.haml
@@ -30,7 +30,7 @@
              = dropdown_loading
        .card-footer
          .text-center
-            .js-source-loading.mt-1.spinner.spinner-sm
+            .js-source-loading.mt-1.gl-spinner
          %ul.list-unstyled.mr_source_commit
    .col-lg-6
@@ -59,7 +59,7 @@
              = dropdown_loading
        .card-footer
          .text-center
-            .js-target-loading.mt-1.spinner.spinner-sm
+            .js-target-loading.mt-1.gl-spinner
          %ul.list-unstyled.mr_target_commit
  - if @merge_request.errors.any?

--- a/app/views/projects/merge_requests/creations/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_submit.html.haml
@@ -48,4 +48,4 @@
  .mr-loading-status
    .loading.hide
-      .spinner.spinner-md
+      .gl-spinner.gl-spinner-md
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -85,7 +85,7 @@
    .mr-loading-status
      .loading.hide
-        .spinner.spinner-md
+        .gl-spinner.gl-spinner-md
 = render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @merge_request.assignees, reviewers: @merge_request.reviewers, source_branch: @merge_request.source_branch

--- a/app/views/projects/mirrors/_ssh_host_keys.html.haml
+++ b/app/views/projects/mirrors/_ssh_host_keys.html.haml
@@ -4,7 +4,7 @@
 .form-group.js-ssh-host-keys-section{ class: ('collapse' unless mirror.ssh_mirror_url?) }
  %button.btn.gl-button.btn-inverted.btn-secondary.inline.js-detect-host-keys.gl-mr-3{ type: 'button', data: { qa_selector: 'detect_host_keys' } }
-    .js-spinner.d-none.spinner.mr-1
+    .js-spinner.d-none.gl-spinner.mr-1
    = _('Detect host keys')
  .fingerprint-ssh-info.js-fingerprint-ssh-info.gl-mt-3.gl-mb-3{ class: ('collapse' unless mirror.ssh_mirror_url?) }
    %label.label-bold

--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -17,4 +17,4 @@
    - if @commit
      .network-graph.gl-bg-white.gl-overflow-scroll.gl-overflow-x-hidden{ data: { url: @url, commit_url: @commit_url, ref: @ref, commit_id: @commit.id } }
        .text-center.gl-mt-3
-          .spinner.spinner-md
+          .gl-spinner.gl-spinner-md
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -75,7 +75,7 @@
 .save-project-loader.d-none
  .center
    %h2
-      .spinner.spinner-md.align-text-bottom
+      .gl-spinner.gl-spinner-md.align-text-bottom
      = s_('ProjectsNew|Creating project & repository.')
    %p
      = s_('ProjectsNew|Please wait a moment, this page will automatically refresh when ready.')
--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
@@ -81,19 +81,19 @@
      #tab-members.tab-pane{ class: ('active' unless groups_tab_active?) }
        .js-project-members-list{ data: project_members_list_data_attributes(@project, @project_members, { param_name: :page, params: { search_groups: nil } }) }
          .loading
-            .spinner.spinner-md
+            .gl-spinner.gl-spinner-md
      - if show_groups?(@group_links)
        #tab-groups.tab-pane{ class: ('active' if groups_tab_active?) }
          .js-project-group-links-list{ data: project_group_links_list_data_attributes(@project, @group_links) }
            .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
      - if show_invited_members?(@project, @invited_members)
        #tab-invited-members.tab-pane
          .js-project-invited-members-list{ data: project_members_list_data_attributes(@project, @invited_members) }
            .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
      - if show_access_requests?(@project, @requesters)
        #tab-access-requests.tab-pane
          .js-project-access-requests-list{ data: project_members_list_data_attributes(@project, @requesters) }
            .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
--- a/app/views/shared/milestones/_delete_button.html.haml
+++ b/app/views/shared/milestones/_delete_button.html.haml
@@ -7,6 +7,6 @@
  milestone_merge_request_count: @milestone.merge_requests.count },
  disabled: true }
  = _('Delete')
-  .spinner.js-loading-icon.hidden
+  .gl-spinner.js-loading-icon.hidden
 #js-delete-milestone-modal
--- a/app/views/shared/milestones/_tab_loading.html.haml
+++ b/app/views/shared/milestones/_tab_loading.html.haml
 .text-center.gl-mt-3
-  .spinner.spinner-md
+  .gl-spinner.gl-spinner-md
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -3,7 +3,7 @@
 .row.d-none.d-sm-flex
  .col-12.calendar-block.gl-my-3
    .user-calendar.light{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: Time.zone.utc_offset } }
-      .spinner.spinner-md.gl-my-8
+      .gl-spinner.gl-spinner-md.gl-my-8
      .user-calendar-error.invisible
        = _('There was an error loading users activity calendar.')
        %a.js-retry-load{ href: '#' }
@@ -20,7 +20,7 @@
            = link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
          .overview-content-list{ data: { href: user_activity_path } }
            .center.light.loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
  - unless Feature.enabled?(:security_auto_fix) && @user.bot?
    .col-md-12.col-lg-6
@@ -32,4 +32,4 @@
            = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
          .overview-content-list{ data: { href: user_projects_path } }
            .center.light.loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -169,7 +169,7 @@
              = s_('UserProfile|Most Recent Activity')
            .content_list{ data: { href: user_activity_path } }
            .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
      - unless @user.bot?
        - if profile_tab?(:groups)
          #groups.tab-pane
@@ -200,7 +200,7 @@
            -# This tab is always loaded via AJAX
    .loading.hide
-      .spinner.spinner-md
+      .gl-spinner.gl-spinner-md
    - if profile_tabs.empty?
      .svg-content

--- a/ee/app/views/admin/application_settings/_seat_link_form.html.haml
+++ b/ee/app/views/admin/application_settings/_seat_link_form.html.haml
@@ -19,7 +19,7 @@
            %p.mb-2= s_('%{link_start}Learn more%{link_end} about what information is shared with GitLab Inc.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
            %button.btn.gl-button.btn-default.js-payload-preview-trigger{ type: 'button', data: { payload_selector: ".#{payload_class}" } }
-              .spinner.js-spinner.gl-display-none.gl-mr-2
+              .gl-spinner.js-spinner.gl-display-none.gl-mr-2
              .js-text.d-inline= _('Preview payload')
            %pre.usage-data.js-syntax-highlight.code.highlight.mt-2.d-none{ class: payload_class, data: { endpoint: seat_link_payload_admin_application_settings_path(format: :html) } }
          - else

--- a/ee/app/views/groups/saml_providers/_scim_token.html.haml
+++ b/ee/app/views/groups/saml_providers/_scim_token.html.haml
@@ -16,4 +16,4 @@
  .well-segment.borderless.col-12.col-lg-9.p-0
    = render 'scim_row', value: @scim_token_url, field: 'scim_endpoint_url', label_text: s_('GroupSAML|SCIM API endpoint URL'), show_clipboard: true
 .gl-mt-3.text-center.js-scim-loading-container.d-none
-  .spinner
+  .gl-spinner
--- a/ee/app/views/projects/_project_templates.html.haml
+++ b/ee/app/views/projects/_project_templates.html.haml
@@ -23,10 +23,10 @@
      = render partial: 'projects/project_templates/template', collection: Gitlab::ProjectTemplate.all + Gitlab::SampleDataTemplate.all
    .project-templates-buttons.import-buttons.tab-pane.js-custom-instance-project-templates-tab-content#custom-instance-project-templates{ data: {initial_templates: user_available_project_templates_path(current_user)} }
      .text-center.m-4
-        .spinner.spinner-md
+        .gl-spinner.gl-spinner-md
    .project-templates-buttons.import-buttons.tab-pane.js-custom-group-project-templates-tab-content#custom-group-project-templates{ data: {initial_templates: user_available_group_templates_path(current_user, group_id: group_id)} }
      .text-center.m-4
-        .spinner.spinner-md
+        .gl-spinner.gl-spinner-md
  .project-fields-form
    = render 'projects/project_templates/project_fields_form'

--- a/ee/app/views/projects/settings/slacks/edit.html.haml
+++ b/ee/app/views/projects/settings/slacks/edit.html.haml
@@ -16,7 +16,7 @@
      .footer-block.row-content-block
        %button.btn.gl-button.btn-confirm{ type: 'submit' }
-          .spinner.spinner-light
+          .gl-spinner.gl-spinner-light
          %span
            Save changes
        &nbsp;

--- a/ee/changelogs/unreleased/327044-migrate-to-gl-spinner.yml
+++ b/ee/changelogs/unreleased/327044-migrate-to-gl-spinner.yml
+---
+title: Migrate spinner class to gl-spinner class
+merge_request: 58706
+author:
+type: changed
--- a/spec/features/projects/commit/builds_spec.rb
+++ b/spec/features/projects/commit/builds_spec.rb
@@ -30,7 +30,7 @@ RSpec.describe 'project commit pipelines', :js do
      wait_for_requests
      page.within('.merge-request-info') do
-        expect(page).not_to have_selector '.spinner'
+        expect(page).not_to have_selector '.gl-spinner'
        expect(page).to have_content 'No related merge requests found'
      end
    end

--- a/spec/frontend/create_merge_request_dropdown_spec.js
+++ b/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="spinner"></div>
+          <div class="gl-spinner"></div>
          <div class="text"></div>
        </div>
        <div class="js-ref"></div>