Merge branch 'pb-change-loading-ux-jobs-tab' into 'master'

Change loading state jobs tab

See merge request gitlab-org/gitlab!81568

app/assets/javascripts/pipelines/components/jobs/jobs_app.vue

@@ -60,6 +60,15 @@ export default {
         iid: this.pipelineIid,
       };
     },
+    loading() {
+      return this.$apollo.queries.jobs.loading;
+    },
+    showSkeletonLoader() {
+      return this.firstLoad && this.loading;
+    },
+    showLoadingSpinner() {
+      return !this.firstLoad && this.loading;
+    },
   },
   mounted() {
     eventHub.$on('jobActionPerformed', this.handleJobAction);
@@ -69,7 +78,7 @@ export default {
   },
   methods: {
     handleJobAction() {
-      this.firstLoad = true;
+      this.firstLoad = false;
 
       this.$apollo.queries.jobs.refetch();
     },
@@ -98,7 +107,7 @@ export default {
 
 <template>
   <div>
-    <div v-if="$apollo.loading && firstLoad" class="gl-mt-5">
+    <div v-if="showSkeletonLoader" class="gl-mt-5">
       <gl-skeleton-loader :width="1248" :height="73">
         <circle cx="748.031" cy="37.7193" r="15.0307" />
         <circle cx="787.241" cy="37.7193" r="15.0307" />
@@ -118,7 +127,7 @@ export default {
     <jobs-table v-else :jobs="jobs" :table-fields="$options.fields" data-testid="jobs-tab-table" />
 
     <gl-intersection-observer v-if="jobsPageInfo.hasNextPage" @appear="fetchMoreJobs">
-      <gl-loading-icon v-if="$apollo.loading" size="md" />
+      <gl-loading-icon v-if="showLoadingSpinner" size="md" />
     </gl-intersection-observer>
   </div>
 </template>

spec/frontend/pipelines/components/jobs/jobs_app_spec.js

-import { GlIntersectionObserver, GlSkeletonLoader } from '@gitlab/ui';
+import { GlIntersectionObserver, GlSkeletonLoader, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
@@ -19,6 +19,7 @@ describe('Jobs app', () => {
   let resolverSpy;
 
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
+  const findLoadingSpinner = () => wrapper.findComponent(GlLoadingIcon);
   const findJobsTable = () => wrapper.findComponent(JobsTable);
 
   const triggerInfiniteScroll = () =>
@@ -48,7 +49,29 @@ describe('Jobs app', () => {
     wrapper.destroy();
   });
 
-  it('displays the loading state', () => {
+  describe('loading spinner', () => {
+    beforeEach(async () => {
+      createComponent(resolverSpy);
+
+      await waitForPromises();
+
+      triggerInfiniteScroll();
+    });
+
+    it('displays loading spinner when fetching more jobs', () => {
+      expect(findLoadingSpinner().exists()).toBe(true);
+      expect(findSkeletonLoader().exists()).toBe(false);
+    });
+
+    it('hides loading spinner after jobs have been fetched', async () => {
+      await waitForPromises();
+
+      expect(findLoadingSpinner().exists()).toBe(false);
+      expect(findSkeletonLoader().exists()).toBe(false);
+    });
+  });
+
+  it('displays the skeleton loader', () => {
     createComponent(resolverSpy);
 
     expect(findSkeletonLoader().exists()).toBe(true);
@@ -91,7 +114,7 @@ describe('Jobs app', () => {
     });
   });
 
-  it('does not display main loading state again after fetchMore', async () => {
+  it('does not display skeleton loader again after fetchMore', async () => {
     createComponent(resolverSpy);
 
     expect(findSkeletonLoader().exists()).toBe(true);