Fix loading being shown at the same time at the empty states

app/assets/javascripts/commit/pipelines/pipelines_table.js

-/* eslint-disable no-new*/
-/* global Flash */
 import Vue from 'vue';
 import PipelinesTableComponent from '../../vue_shared/components/pipelines_table';
 import PipelinesService from '../../vue_pipelines_index/services/pipelines_service';
@@ -50,11 +48,11 @@ export default Vue.component('pipelines-table', {
 
   computed: {
     shouldRenderErrorState() {
-      return this.hasError && !this.pageRequest;
+      return this.hasError && !this.isLoading;
     },
 
     shouldRenderEmptyState() {
-      return !this.state.pipelines.length && !this.pageRequest;
+      return !this.state.pipelines.length && !this.isLoading;
     },
   },
 
@@ -98,7 +96,6 @@ export default Vue.component('pipelines-table', {
         .catch(() => {
           this.hasError = true;
           this.isLoading = false;
-          new Flash('An error occurred while fetching the pipelines, please reload the page again.');
         });
     },
   },

app/assets/javascripts/vue_pipelines_index/pipelines.js

@@ -45,7 +45,7 @@ export default {
       state: this.store.state,
       apiScope: 'all',
       pagenum: 1,
-      pageRequest: false,
+      isLoading: false,
       hasError: false,
     };
   },
@@ -61,7 +61,7 @@ export default {
     },
 
     shouldRenderErrorState() {
-      return this.hasError && !this.pageRequest;
+      return this.hasError && !this.isLoading;
     },
 
     /**
@@ -71,7 +71,7 @@ export default {
     * @return {Boolean}
     */
     shouldRenderEmptyState() {
-      return !this.pageRequest &&
+      return !this.isLoading &&
         !this.hasError &&
         !this.state.pipelines.length &&
         (this.scope === 'all' || this.scope === null);
@@ -83,7 +83,7 @@ export default {
      * @return {Boolean}
      */
     shouldRenderNoPipelinesMessage() {
-      return !this.pageRequest &&
+      return !this.isLoading &&
         !this.hasError &&
         !this.state.pipelines.length &&
         this.scope !== 'all' &&
@@ -92,7 +92,7 @@ export default {
 
     shouldRenderTable() {
       return !this.hasError &&
-        !this.pageRequest && this.state.pipelines.length;
+        !this.isLoading && this.state.pipelines.length;
     },
 
     /**
@@ -101,7 +101,7 @@ export default {
     * @return {Boolean}
     */
     shouldRenderPagination() {
-      return !this.pageRequest &&
+      return !this.isLoading &&
         this.state.pipelines.length &&
         this.state.pageInfo.total > this.state.pageInfo.perPage;
     },
@@ -157,7 +157,7 @@ export default {
       const pageNumber = gl.utils.getParameterByName('page') || this.pagenum;
       const scope = gl.utils.getParameterByName('scope') || this.apiScope;
 
-      this.pageRequest = true;
+      this.isLoading = true;
       return this.service.getPipelines(scope, pageNumber)
         .then(resp => ({
           headers: resp.headers,
@@ -169,11 +169,11 @@ export default {
           this.store.storePagination(response.headers);
         })
         .then(() => {
-          this.pageRequest = false;
+          this.isLoading = false;
         })
         .catch(() => {
           this.hasError = true;
-          this.pageRequest = false;
+          this.isLoading = false;
         });
     },
   },
@@ -183,7 +183,7 @@ export default {
 
       <div
         class="top-area"
-        v-if="!pageRequest && !shouldRenderEmptyState">
+        v-if="!isLoading && !shouldRenderEmptyState">
         <navigation-tabs
           :scope="scope"
           :count="state.count"
@@ -201,7 +201,7 @@ export default {
 
         <div
           class="realtime-loading"
-          v-if="pageRequest">
+          v-if="isLoading">
           <i
             class="fa fa-spinner fa-spin"
             aria-hidden="true" />

spec/javascripts/commit/pipelines/pipelines_spec.js

@@ -34,6 +34,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
         setTimeout(() => {
           expect(component.$el.querySelector('.empty-state')).toBeDefined();
+          expect(component.$el.querySelector('.realtime-loading')).toBe(null);
           done();
         }, 1);
       });
@@ -63,6 +64,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
         setTimeout(() => {
           expect(component.$el.querySelectorAll('table > tbody > tr').length).toEqual(1);
+          expect(component.$el.querySelector('.realtime-loading')).toBe(null);
           done();
         }, 0);
       });
@@ -93,6 +95,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
       setTimeout(() => {
         expect(component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
+        expect(component.$el.querySelector('.realtime-loading')).toBe(null);
         done();
       }, 0);
     });

spec/javascripts/vue_pipelines_index/pipelines_spec.js

@@ -41,6 +41,7 @@ describe('Pipelines', () => {
 
         setTimeout(() => {
           expect(component.$el.querySelector('.table-holder')).toBeDefined();
+          expect(component.$el.querySelector('.realtime-loading')).toBe(null);
           done();
         });
       });
@@ -72,6 +73,7 @@ describe('Pipelines', () => {
 
         setTimeout(() => {
           expect(component.$el.querySelector('.empty-state')).toBeDefined();
+          expect(component.$el.querySelector('.realtime-loading')).toBe(null);
           done();
         });
       });
@@ -104,6 +106,7 @@ describe('Pipelines', () => {
 
       setTimeout(() => {
         expect(component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
+        expect(component.$el.querySelector('.realtime-loading')).toBe(null);
         done();
       });
     });