Merge branch '202584-migrate-fa-spinner-to-spinner-within-app-views-users' into 'master'

Resolve "Migrate '.fa-spinner' to '.spinner' within 'app/views/users'"

See merge request gitlab-org/gitlab!24672

app/assets/javascripts/pages/users/activity_calendar.js

@@ -18,7 +18,7 @@ const firstDayOfWeekChoices = Object.freeze({
 
 const LOADING_HTML = `
   <div class="text-center">
-    <i class="fa fa-spinner fa-spin user-calendar-activities-loading"></i>
+    <div class="spinner spinner-md"></div>
   </div>
 `;
 

app/assets/javascripts/pages/users/user_tabs.js

@@ -57,10 +57,8 @@ import UserOverviewBlock from './user_overview_block';
  *   </div>
  * </div>
  *
- * <div class="loading-status">
- *   <div class="loading">
- *     Loading Animation
- *   </div>
+ * <div class="loading">
+ *   Loading Animation
  * </div>
  */
 
@@ -242,7 +240,7 @@ export default class UserTabs {
   }
 
   toggleLoading(status) {
-    return this.$parentEl.find('.loading-status .loading').toggleClass('hide', !status);
+    return this.$parentEl.find('.loading').toggleClass('hide', !status);
   }
 
   setCurrentAction(source) {

app/views/users/_overview.html.haml

@@ -3,7 +3,7 @@
     .calendar-block.prepend-top-default.append-bottom-default
       .user-calendar.d-none.d-sm-block{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: Time.zone.utc_offset } }
         %h4.center.light
-          = spinner nil, true
+          .spinner.spinner-md
       .user-calendar-activities.d-none.d-sm-block
 .row
   .col-md-12.col-lg-6
@@ -16,7 +16,7 @@
             = link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
           .overview-content-list{ data: { href: user_path } }
             .center.light.loading
-              = spinner nil, true
+              .spinner.spinner-md
 
   .col-md-12.col-lg-6
     .projects-block
@@ -27,4 +27,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 nil, true
+            .spinner.spinner-md

app/views/users/show.html.haml

@@ -130,7 +130,8 @@
             %h4.prepend-top-20
               = s_('UserProfile|Most Recent Activity')
             .content_list{ data: { href: user_path } }
-            = spinner
+            .loading
+              .spinner.spinner-md
 
       - if profile_tab?(:groups)
         #groups.tab-pane
@@ -152,8 +153,8 @@
         #snippets.tab-pane
           -# This tab is always loaded via AJAX
 
-    .loading-status
-      = spinner
+    .loading.hide
+      .spinner.spinner-md
 
   - if profile_tabs.empty?
     .row