Merge branch '349670-loading-training-item' into 'master'

Add training item loading in vulnerability details page

See merge request gitlab-org/gitlab!78709

ee/app/assets/javascripts/vulnerabilities/components/vulnerability_training.vue

 <script>
-import { GlLink, GlIcon } from '@gitlab/ui';
+import { GlLink, GlIcon, GlSkeletonLoader } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import securityTrainingProvidersQuery from '~/security_configuration/graphql/security_training_providers.query.graphql';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -27,6 +27,7 @@ export default {
   components: {
     GlLink,
     GlIcon,
+    GlSkeletonLoader,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -112,9 +113,7 @@ export default {
       {{ $options.i18n.trainingUnavailable }}
     </p>
     <div v-else-if="isLoading">
-      <!-- Loading skeleton will be added in a follow up issue
-      https://gitlab.com/gitlab-org/gitlab/-/issues/349670 -->
-      {{ $options.i18n.loading }}
+      <gl-skeleton-loader :width="200" :lines="3" />
     </div>
     <div v-else>
       <div class="gl-font-weight-bold gl-font-base">{{ training.name }}</div>

ee/spec/frontend/vulnerabilities/vulnerability_training_spec.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import MockAdapter from 'axios-mock-adapter';
-import { GlLink, GlIcon } from '@gitlab/ui';
+import { GlLink, GlIcon, GlSkeletonLoader } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
 
@@ -58,6 +58,8 @@ describe('VulnerabilityTraining component', () => {
     mock.restore();
   });
 
+  const delayTrainingResponse = async () =>
+    mock.onGet(mockProvider.path).reply(() => new Promise(() => {}));
   const mockTrainingSuccess = async () =>
     mock.onGet(mockProvider.path).reply(httpStatus.OK, { url: mockSuccessTrainingUrl });
   const waitForQueryToBeLoaded = () => waitForPromises();
@@ -115,6 +117,14 @@ describe('VulnerabilityTraining component', () => {
   });
 
   describe('training item', () => {
+    it('displays GlSkeletonLoader when loading', async () => {
+      await delayTrainingResponse();
+      createComponent();
+      await waitForQueryToBeLoaded();
+
+      expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(true);
+    });
+
     it('displays training item information', async () => {
       await mockTrainingSuccess();
       createComponent();