From f117aa362308f0e70b41020a0490acb45c047ea2 Mon Sep 17 00:00:00 2001
From: Jarek Ostrowski <jarek.j.ostrowski@gmail.com>
Date: Wed, 28 Apr 2021 15:51:28 -0400
Subject: [PATCH] Migrate spinner to use gl-spinner class

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/58706
---
 .../create_merge_request_dropdown.js          |  2 +-
 app/assets/javascripts/notes.js               |  2 +-
 .../javascripts/pages/users/user_tabs.js      |  4 +-
 app/assets/stylesheets/framework/buttons.scss |  2 +-
 .../stylesheets/framework/dropdowns.scss      |  2 +-
 .../stylesheets/framework/editor-lite.scss    |  2 +-
 app/assets/stylesheets/framework/spinner.scss | 49 +++++--------------
 .../page_bundles/_pipeline_mixins.scss        |  2 +-
 .../stylesheets/page_bundles/pipeline.scss    |  2 +-
 .../application_settings/_usage.html.haml     |  2 +-
 app/views/clusters/clusters/_banner.html.haml |  2 +-
 app/views/dashboard/_activities.html.haml     |  2 +-
 app/views/dashboard/groups/_groups.html.haml  |  2 +-
 app/views/dashboard/todos/_todo.html.haml     |  6 +--
 app/views/dashboard/todos/index.html.haml     |  4 +-
 app/views/explore/groups/_groups.html.haml    |  2 +-
 app/views/groups/_activities.html.haml        |  2 +-
 app/views/groups/_archived_projects.html.haml |  2 +-
 app/views/groups/_shared_projects.html.haml   |  2 +-
 .../groups/_subgroups_and_projects.html.haml  |  2 +-
 .../groups/group_members/index.html.haml      |  8 +--
 app/views/groups/imports/show.html.haml       |  2 +-
 app/views/ide/_show.html.haml                 |  2 +-
 app/views/projects/_activity.html.haml        |  2 +-
 app/views/projects/blob/_upload.html.haml     |  2 +-
 .../projects/commit/_commit_box.html.haml     |  4 +-
 app/views/projects/diffs/_diffs.html.haml     |  2 +-
 app/views/projects/edit.html.haml             |  2 +-
 .../projects/issues/_new_branch.html.haml     |  4 +-
 .../creations/_new_compare.html.haml          |  4 +-
 .../creations/_new_submit.html.haml           |  2 +-
 .../projects/merge_requests/show.html.haml    |  2 +-
 .../projects/mirrors/_ssh_host_keys.html.haml |  2 +-
 app/views/projects/network/show.html.haml     |  2 +-
 app/views/projects/new.html.haml              |  2 +-
 .../projects/project_members/index.html.haml  |  8 +--
 .../milestones/_delete_button.html.haml       |  2 +-
 .../shared/milestones/_tab_loading.html.haml  |  2 +-
 app/views/users/_overview.html.haml           |  6 +--
 app/views/users/show.html.haml                |  4 +-
 .../_seat_link_form.html.haml                 |  2 +-
 .../saml_providers/_scim_token.html.haml      |  2 +-
 .../projects/_project_templates.html.haml     |  4 +-
 .../projects/settings/slacks/edit.html.haml   |  2 +-
 .../327044-migrate-to-gl-spinner.yml          |  5 ++
 spec/features/projects/commit/builds_spec.rb  |  2 +-
 .../create_merge_request_dropdown_spec.js     |  2 +-
 47 files changed, 78 insertions(+), 100 deletions(-)
 create mode 100644 ee/changelogs/unreleased/327044-migrate-to-gl-spinner.yml

diff --git a/app/assets/javascripts/create_merge_request_dropdown.js b/app/assets/javascripts/create_merge_request_dropdown.js
index 000faacb7d7c76..1c0dab11392f1d 100644
--- 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;
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index b5c59f34e871dc..c324c846f47ffb 100644
--- 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();
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index 80e14842f515be..f9d70845560970 100644
--- 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();
           });
       });
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index d1fa1187703a36..603d28a83957c1 100644
--- 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;
     }
   }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index ff42cd836da99d..1939a4b5be46f6 100644
--- 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;
diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss
index 78995c6e4f5f14..05b53e0c3d8b8a 100644
--- 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;
   }
diff --git a/app/assets/stylesheets/framework/spinner.scss b/app/assets/stylesheets/framework/spinner.scss
index c8eadce5c51ffd..afd2e7ff757cf0 100644
--- a/app/assets/stylesheets/framework/spinner.scss
+++ b/app/assets/stylesheets/framework/spinner.scss
@@ -1,16 +1,20 @@
-@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-color($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;
+  @include spinner-size-deprecated($size, $border-width);
+  @include spinner-color-deprecated($color);
 }
diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
index 0d6f360112bd04..fd47d247edb184 100644
--- 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;
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index 2f3cf889549ad7..c7ade30d910e29 100644
--- 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;
       }
 
diff --git a/app/views/admin/application_settings/_usage.html.haml b/app/views/admin/application_settings/_usage.html.haml
index 7bef2dbfb3495d..64e8751bf31171 100644
--- 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
diff --git a/app/views/clusters/clusters/_banner.html.haml b/app/views/clusters/clusters/_banner.html.haml
index 4a84745cf986ea..6d902132c73720 100644
--- 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' }
diff --git a/app/views/dashboard/_activities.html.haml b/app/views/dashboard/_activities.html.haml
index d617ee0e4ccda0..ec07c636b7908f 100644
--- 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
diff --git a/app/views/dashboard/groups/_groups.html.haml b/app/views/dashboard/groups/_groups.html.haml
index 2f9dbf87d95c98..d5cd4b66e2bd9c 100644
--- a/app/views/dashboard/groups/_groups.html.haml
+++ b/app/views/dashboard/groups/_groups.html.haml
@@ -1,4 +1,4 @@
 .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
diff --git a/app/views/dashboard/todos/_todo.html.haml b/app/views/dashboard/todos/_todo.html.haml
index f2f8afb636d539..bfd931e17baa72 100644
--- 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
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 66587518efc42e..dcf8af4985c3c3 100644
--- 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
diff --git a/app/views/explore/groups/_groups.html.haml b/app/views/explore/groups/_groups.html.haml
index a3249275d5ebee..0358fc524d34a3 100644
--- a/app/views/explore/groups/_groups.html.haml
+++ b/app/views/explore/groups/_groups.html.haml
@@ -1,4 +1,4 @@
 .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
diff --git a/app/views/groups/_activities.html.haml b/app/views/groups/_activities.html.haml
index b1a40bfc96b9cd..1695d3b553913d 100644
--- 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
diff --git a/app/views/groups/_archived_projects.html.haml b/app/views/groups/_archived_projects.html.haml
index 48e9f630050f73..959c26acae04ff 100644
--- 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
diff --git a/app/views/groups/_shared_projects.html.haml b/app/views/groups/_shared_projects.html.haml
index 2769b69add3ef5..bfd056ccdd2721 100644
--- 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
diff --git a/app/views/groups/_subgroups_and_projects.html.haml b/app/views/groups/_subgroups_and_projects.html.haml
index d9ab828a83ba7c..651d182b9cc1c0 100644
--- 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
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index 53ca694299e20c..fc67057f417132 100644
--- 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
diff --git a/app/views/groups/imports/show.html.haml b/app/views/groups/imports/show.html.haml
index ac8ca8797fe526..79cac364016361 100644
--- 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.')
diff --git a/app/views/ide/_show.html.haml b/app/views/ide/_show.html.haml
index 70ac532e69f8aa..4fc00dfb3f43d2 100644
--- 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...')
diff --git a/app/views/projects/_activity.html.haml b/app/views/projects/_activity.html.haml
index db0f13843dd69e..c5a0b6a1428dd0 100644
--- 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
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index c42b54ec61de4a..28e33e3ac9bfbc 100644
--- 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"
 
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 1b28136e82c2f7..67007aa7448d5f 100644
--- 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
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index ac35a0a25c739e..bb2682bb7c0419 100644
--- 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 }
 
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index ecaf3467cd2ddc..187fe608a680d8 100644
--- 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.')
 
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index 45b2f86c03d79c..07fec195899c02 100644
--- 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' } }
diff --git a/app/views/projects/merge_requests/creations/_new_compare.html.haml b/app/views/projects/merge_requests/creations/_new_compare.html.haml
index 7082bf4b8b0d9d..b99714c17945ad 100644
--- 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?
diff --git a/app/views/projects/merge_requests/creations/_new_submit.html.haml b/app/views/projects/merge_requests/creations/_new_submit.html.haml
index ca1c4ed2d193a8..7e1ca19d9b64da 100644
--- 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
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 0452bd0571dbfa..6ce6ec5c1bc60d 100644
--- 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
 
diff --git a/app/views/projects/mirrors/_ssh_host_keys.html.haml b/app/views/projects/mirrors/_ssh_host_keys.html.haml
index 4e3cd609d75e8d..4411bc474b8acb 100644
--- 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
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index 3cff85a497961a..4cabb9304337b3 100644
--- 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
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 059d6eb28c5047..609d3317315a76 100644
--- 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.')
diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml
index 01114b8b4f736d..628d36b86d9cd2 100644
--- 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
diff --git a/app/views/shared/milestones/_delete_button.html.haml b/app/views/shared/milestones/_delete_button.html.haml
index 09c783a0b24f27..6d4ff255f0642b 100644
--- 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
diff --git a/app/views/shared/milestones/_tab_loading.html.haml b/app/views/shared/milestones/_tab_loading.html.haml
index fe1184114e9f87..b19e994ef800ef 100644
--- a/app/views/shared/milestones/_tab_loading.html.haml
+++ b/app/views/shared/milestones/_tab_loading.html.haml
@@ -1,2 +1,2 @@
 .text-center.gl-mt-3
-  .spinner.spinner-md
+  .gl-spinner.gl-spinner-md
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index a78971967ffaa2..eb29e691ebdfcb 100644
--- 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
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index daa41e0ebfe1d2..d89f4b811a307d 100644
--- 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
diff --git a/ee/app/views/admin/application_settings/_seat_link_form.html.haml b/ee/app/views/admin/application_settings/_seat_link_form.html.haml
index 11073919e41dbb..46420c19a55044 100644
--- 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
diff --git a/ee/app/views/groups/saml_providers/_scim_token.html.haml b/ee/app/views/groups/saml_providers/_scim_token.html.haml
index e3f977957fc709..5d664c4373cbc0 100644
--- 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
diff --git a/ee/app/views/projects/_project_templates.html.haml b/ee/app/views/projects/_project_templates.html.haml
index 238cc630e5d829..3d97262935a49d 100644
--- 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'
diff --git a/ee/app/views/projects/settings/slacks/edit.html.haml b/ee/app/views/projects/settings/slacks/edit.html.haml
index 49955e6c4b3aac..45bb8e79a7693a 100644
--- 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;
diff --git a/ee/changelogs/unreleased/327044-migrate-to-gl-spinner.yml b/ee/changelogs/unreleased/327044-migrate-to-gl-spinner.yml
new file mode 100644
index 00000000000000..087e5808ee2576
--- /dev/null
+++ b/ee/changelogs/unreleased/327044-migrate-to-gl-spinner.yml
@@ -0,0 +1,5 @@
+---
+title: Migrate spinner class to gl-spinner class
+merge_request: 58706
+author:
+type: changed
diff --git a/spec/features/projects/commit/builds_spec.rb b/spec/features/projects/commit/builds_spec.rb
index 00ec9d49a108ff..7b10f72006f023 100644
--- a/spec/features/projects/commit/builds_spec.rb
+++ b/spec/features/projects/commit/builds_spec.rb
@@ -30,7 +30,7 @@
       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
diff --git a/spec/frontend/create_merge_request_dropdown_spec.js b/spec/frontend/create_merge_request_dropdown_spec.js
index b4c13981dd5720..6f15f31332580d 100644
--- 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>
-- 
GitLab