Merge branch...

Merge branch '235452-implement-skeleton-chart-loader-for-mr-analytics-throughput-chart' into 'master'

Implement skeleton chart loader for MR analytics throughput chart

See merge request gitlab-org/gitlab!39424

ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_chart.vue

 <script>
 import { GlAreaChart } from '@gitlab/ui/dist/charts';
-import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert } from '@gitlab/ui';
+import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue';
 import throughputChartQueryBuilder from '../graphql/throughput_chart_query_builder';
 import { THROUGHPUT_CHART_STRINGS } from '../constants';
 
@@ -9,7 +10,7 @@ export default {
   components: {
     GlAreaChart,
     GlAlert,
-    GlLoadingIcon,
+    ChartSkeletonLoader,
   },
   inject: ['fullPath'],
   props: {
@@ -101,7 +102,7 @@ export default {
     <div class="gl-text-gray-700" data-testid="chartDescription">
       {{ $options.strings.chartDescription }}
     </div>
-    <gl-loading-icon v-if="chartDataLoading" size="md" class="gl-mt-4" />
+    <chart-skeleton-loader v-if="chartDataLoading" />
     <gl-area-chart
       v-else-if="chartDataAvailable"
       :data="formattedThroughputChartData"

ee/spec/frontend/analytics/merge_request_analytics/components/throughput_chart_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert } from '@gitlab/ui';
 import { GlAreaChart } from '@gitlab/ui/dist/charts';
+import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue';
 import ThroughputChart from 'ee/analytics/merge_request_analytics/components/throughput_chart.vue';
 import { THROUGHPUT_CHART_STRINGS } from 'ee/analytics/merge_request_analytics/constants';
 import { throughputChartData, startDate, endDate, fullPath } from '../mock_data';
@@ -66,8 +67,8 @@ describe('ThroughputChart', () => {
       expect(alert.text()).toBe(THROUGHPUT_CHART_STRINGS.NO_DATA);
     });
 
-    it('does not display a loading icon', () => {
-      displaysComponent(GlLoadingIcon, false);
+    it('does not display a skeleton loader', () => {
+      displaysComponent(ChartSkeletonLoader, false);
     });
 
     it('does not display the chart', () => {
@@ -80,8 +81,8 @@ describe('ThroughputChart', () => {
       createComponent({ loading: true });
     });
 
-    it('displays a loading icon', () => {
-      displaysComponent(GlLoadingIcon, true);
+    it('displays a skeleton loader', () => {
+      displaysComponent(ChartSkeletonLoader, true);
     });
 
     it('does not display the chart', () => {
@@ -102,8 +103,8 @@ describe('ThroughputChart', () => {
       displaysComponent(GlAreaChart, true);
     });
 
-    it('does not display a loading icon', () => {
-      displaysComponent(GlLoadingIcon, false);
+    it('does not display the skeleton loader', () => {
+      displaysComponent(ChartSkeletonLoader, false);
     });
 
     it('does not display a no data message', () => {
@@ -120,8 +121,8 @@ describe('ThroughputChart', () => {
       displaysComponent(GlAreaChart, false);
     });
 
-    it('does not display a loading icon', () => {
-      displaysComponent(GlLoadingIcon, false);
+    it('does not display the skeleton loader', () => {
+      displaysComponent(ChartSkeletonLoader, false);
     });
 
     it('displays an error message', () => {