Merge branch...

Merge branch '204740-migrate-fa-spinner-to-spinner-within-app-views-projects-cycle_analytics' into 'master'

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

See merge request gitlab-org/gitlab!24861

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

 import $ from 'jquery';
 import Vue from 'vue';
 import Cookies from 'js-cookie';
-import { GlEmptyState } from '@gitlab/ui';
+import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
 import filterMixins from 'ee_else_ce/analytics/cycle_analytics/mixins/filter_mixins';
 import Flash from '../flash';
 import { __ } from '~/locale';
@@ -28,6 +28,7 @@ export default () => {
     name: 'CycleAnalytics',
     components: {
       GlEmptyState,
+      GlLoadingIcon,
       banner,
       'stage-issue-component': stageComponent,
       'stage-plan-component': stageComponent,

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -109,14 +109,6 @@
     top: $gl-padding-top;
   }
 
-  .fa-spinner {
-    font-size: 28px;
-    position: relative;
-    margin-left: -20px;
-    left: 50%;
-    margin-top: 36px;
-  }
-
   .stage-panel-body {
     display: flex;
     flex-wrap: wrap;

app/views/projects/cycle_analytics/show.html.haml

@@ -5,7 +5,7 @@
     %banner{ "v-if" => "!isOverviewDialogDismissed",
       "documentation-link": help_page_path('user/analytics/value_stream_analytics.md'),
       "v-on:dismiss-overview-dialog" => "dismissOverviewDialog()" }
-  = icon("spinner spin", "v-show" => "isLoading")
+  %gl-loading-icon{ "v-show" => "isLoading", "size" => "lg" }
   .wrapper{ "v-show" => "!isLoading && !hasError" }
     .card
       .card-header
@@ -57,8 +57,7 @@
             %ul
               %stage-nav-item{ "v-for" => "stage in state.stages", ":key" => '`ca-stage-title-${stage.title}`', '@select' => 'selectStage(stage)', ":title" => "stage.title", ":is-user-allowed" => "stage.isUserAllowed", ":value" => "stage.value", ":is-active" => "stage.active" }
           .section.stage-events
-            %template{ "v-if" => "isLoadingStage" }
-              = icon("spinner spin")
+            %gl-loading-icon{ "v-show" => "isLoadingStage", "size" => "lg" }
             %template{ "v-if" => "currentStage && !currentStage.isUserAllowed" }
               = render partial: "no_access"
             %template{ "v-else" => true }

changelogs/unreleased/204740-migrate-fa-spinner-to-spinner-within-app-views-projects-cycle_anal.yml

+---
+title: Update loading icon in Value Stream Analytics view
+merge_request: 24861
+author:
+type: other