Merge branch...

Merge branch '244694-replace-gldeprecatedskeletonloading-with-glskeletonloader-in-app-assets-javascripts' into 'master'

Migrate `GlDeprecatedSkeletonLoading` to `GlSkeletonLoader`

See merge request gitlab-org/gitlab!59180

app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue

 <script>
 /* eslint-disable vue/no-v-html */
-import {
-  GlPopover,
-  GlLink,
-  GlDeprecatedSkeletonLoading as GlSkeletonLoading,
-  GlIcon,
-} from '@gitlab/ui';
+import { GlPopover, GlLink, GlSkeletonLoader, GlIcon } from '@gitlab/ui';
 import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
 import { glEmojiTag } from '../../../emoji';
 import UserAvatarImage from '../user_avatar/user_avatar_image.vue';
@@ -19,7 +14,7 @@ export default {
     GlIcon,
     GlLink,
     GlPopover,
-    GlSkeletonLoading,
+    GlSkeletonLoader,
     UserAvatarImage,
     UserNameWithStatus,
   },
@@ -65,15 +60,13 @@ export default {
       <div class="gl-p-2 flex-shrink-1">
         <user-avatar-image :img-src="user.avatarUrl" :size="60" css-classes="gl-mr-3!" />
       </div>
-      <div class="gl-p-2 gl-w-full">
+      <div class="gl-p-2 gl-w-full gl-min-w-0">
         <template v-if="userIsLoading">
-          <!-- `gl-skeleton-loading` does not support equal length lines -->
-          <!-- This can be migrated to `gl-skeleton-loader` when https://gitlab.com/gitlab-org/gitlab-ui/-/issues/872 is completed -->
-          <gl-skeleton-loading
-            v-for="n in $options.maxSkeletonLines"
-            :key="n"
-            :lines="1"
-            class="animation-container-small gl-mb-2"
+          <gl-skeleton-loader
+            :lines="$options.maxSkeletonLines"
+            preserve-aspect-ratio="none"
+            equal-width-lines
+            :height="52"
           />
         </template>
         <template v-else>

changelogs/unreleased/244694-replace-gldeprecatedskeletonloading-with-glskeletonloader-in-app-a.yml

+---
+title: Replace deprecated skeleton loader in the user popover with slightly darker SVG based skelton loader
+merge_request: 59180
+author:
+type: other

spec/frontend/vue_shared/components/user_popover/user_popover_spec.js

-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlSprintf, GlIcon } from '@gitlab/ui';
+import { GlSkeletonLoader, GlSprintf, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { AVAILABILITY_STATUS } from '~/set_status_modal/utils';
 import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
@@ -52,7 +52,7 @@ describe('User Popover Component', () => {
   };
 
   describe('when user is loading', () => {
-    it('displays skeleton loaders', () => {
+    it('displays skeleton loader', () => {
       createWrapper({
         user: {
           name: null,
@@ -65,7 +65,7 @@ describe('User Popover Component', () => {
         },
       });
 
-      expect(wrapper.findAll(GlSkeletonLoading)).toHaveLength(4);
+      expect(wrapper.find(GlSkeletonLoader).exists()).toBe(true);
     });
   });