Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

2 files changed, 7 insertions, 7 deletions

diff --git a/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue b/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue
index 6ac1bce4032..567e534d9cf 100644
--- a/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue
+++ b/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
+import { GlSkeletonLoader } from '@gitlab/ui';
 import { flatten, isEqual, keyBy } from 'lodash';
 import createFlash from '~/flash';
 import { sprintf, s__ } from '~/locale';
@@ -48,7 +48,7 @@ const groupRawMetrics = (groups = [], rawData = []) => {
 export default {
   name: 'ValueStreamMetrics',
   components: {
-    GlSkeletonLoading,
+    GlSkeletonLoader,
     MetricTile,
   },
   props: {
@@ -119,8 +119,8 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-display-flex gl-mt-6" data-testid="vsa-metrics">
-    <gl-skeleton-loading v-if="isLoading" class="gl-h-auto gl-py-3 gl-pr-9 gl-my-6" />
+  <div class="gl-display-flex" data-testid="vsa-metrics" :class="isLoading ? 'gl-my-6' : 'gl-mt-6'">
+    <gl-skeleton-loader v-if="isLoading" />
     <template v-else>
       <div v-if="hasGroupedMetrics" class="gl-flex-direction-column">
         <div
diff --git a/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue b/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue
index 63ec40d4ec6..457a52d3807 100644
--- a/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue
+++ b/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
+import { GlSkeletonLoader } from '@gitlab/ui';
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
 import createFlash from '~/flash';
 import { number } from '~/lib/utils/unit_format';
@@ -11,7 +11,7 @@ const defaultPrecision = 0;
 export default {
   name: 'UsageCounts',
   components: {
-    GlSkeletonLoading,
+    GlSkeletonLoader,
     GlSingleStat,
   },
   data() {
@@ -65,7 +65,7 @@ export default {
     <div
       class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-my-6 gl-align-items-flex-start"
     >
-      <gl-skeleton-loading v-if="$apollo.queries.counts.loading" />
+      <gl-skeleton-loader v-if="$apollo.queries.counts.loading" />
       <template v-else>
         <gl-single-stat
           v-for="count in counts"