Merge branch 'mw-onboarding-helper-spinner' into 'master'

Onboarding helper: Display loading icon when user clicks "Skip step"

See merge request gitlab-org/gitlab-ee!14110

ee/app/assets/javascripts/onboarding/onboarding_helper/components/onboarding_helper.vue

 <script>
 import { __, s__, sprintf } from '~/locale';
-import { GlLink, GlProgressBar, GlButton } from '@gitlab/ui';
+import { GlLink, GlProgressBar, GlButton, GlLoadingIcon } from '@gitlab/ui';
 import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import HelpContentPopover from './help_content_popover.vue';
@@ -14,6 +14,7 @@ export default {
     GlLink,
     GlProgressBar,
     GlButton,
+    GlLoadingIcon,
     HelpContentPopover,
     TourPartsList,
   },
@@ -68,6 +69,7 @@ export default {
       showPopover: false,
       popoverDismissed: false,
       helpContentTrigger: null,
+      showLoadingIcon: false,
     };
   },
   computed: {
@@ -124,6 +126,7 @@ export default {
       }
     },
     skipStep() {
+      this.showLoadingIcon = true;
       this.$emit('skipStep');
     },
     restartStep() {
@@ -158,7 +161,13 @@ export default {
     />
     <div class="d-flex align-items-center cursor-pointer">
       <div class="avatar s48 mr-1 d-flex">
-        <img :src="goldenTanukiSvgPath" :alt="s__('Golden Tanuki')" class="m-auto" />
+        <img
+          v-if="!showLoadingIcon"
+          :src="goldenTanukiSvgPath"
+          :alt="s__('Golden Tanuki')"
+          class="m-auto"
+        />
+        <gl-loading-icon v-else :inline="true" class="m-auto" />
       </div>
       <div class="d-flex flex-grow justify-content-between">
         <div class="qa-headline">

ee/spec/javascripts/onboarding/onboarding_helper/components/onboarding_helper_spec.js

@@ -2,7 +2,7 @@ import component from 'ee/onboarding/onboarding_helper/components/onboarding_hel
 import TourPartsList from 'ee/onboarding/onboarding_helper/components/tour_parts_list.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import { shallowMount } from '@vue/test-utils';
-import { GlProgressBar } from '@gitlab/ui';
+import { GlProgressBar, GlLoadingIcon } from '@gitlab/ui';
 
 describe('User onboarding tour parts list', () => {
   let wrapper;
@@ -24,6 +24,7 @@ describe('User onboarding tour parts list', () => {
     initialShow: false,
     dismissPopover: false,
     goldenTanukiSvgPath: 'illustrations/golden_tanuki.svg',
+    showLoadingIcon: false,
   };
 
   function createComponent(propsData) {
@@ -198,6 +199,19 @@ describe('User onboarding tour parts list', () => {
 
         expect(wrapper.emitted('skipStep')).toBeTruthy();
       });
+
+      it('displays the loading icon instead of the tanuki SVG when the "Skip this step" link is clicked', done => {
+        wrapper.find('.qa-skip-step-link').vm.$emit('click');
+
+        expect(wrapper.vm.showLoadingIcon).toBe(true);
+
+        wrapper.vm.$nextTick(() => {
+          expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+          expect(wrapper.find('.avatar img').exists()).toBe(false);
+
+          done();
+        });
+      });
     });
 
     describe('restartStep', () => {