Merge branch 'gt/migrate-skeleton-loader' into 'master'

Migrate `GlDeprecatedSkeletonLoading` to `GlSkeletonLoader`

See merge request gitlab-org/gitlab!87336

app/assets/javascripts/ide/components/ide_side_bar.vue

 <script>
-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
+import { GlSkeletonLoader } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
 import { SIDEBAR_INIT_WIDTH, leftSidebarViews } from '../constants';
 import ActivityBar from './activity_bar.vue';
@@ -10,7 +10,7 @@ import ResizablePanel from './resizable_panel.vue';
 export default {
   components: {
-    GlSkeletonLoading,
+    GlSkeletonLoader,
     ResizablePanel,
     ActivityBar,
     IdeTree,
@@ -38,7 +38,7 @@ export default {
     <template v-if="loading">
       <div class="multi-file-commit-panel-inner" data-testid="ide-side-bar-inner">
         <div v-for="n in 3" :key="n" class="multi-file-loading-container">
-          <gl-skeleton-loading />
+          <gl-skeleton-loader />
         </div>
       </div>
     </template>

spec/frontend/ide/components/ide_side_bar_spec.js

-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
+import { GlSkeletonLoader } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
@@ -47,7 +47,7 @@ describe('IdeSidebar', () => {
     await nextTick();
-    expect(wrapper.findAll(GlSkeletonLoading)).toHaveLength(3);
+    expect(wrapper.findAll(GlSkeletonLoader)).toHaveLength(3);
   });
   describe('deferred rendering components', () => {