From cfe2e6b7a3fdc85637191b0c0a42ac28a6b667aa Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Tue, 21 Mar 2017 16:09:09 +0000
Subject: Fix loading being shown at the same time at the empty states

---
 .../commit/pipelines/pipelines_table.js            |  7 ++-----
 .../javascripts/vue_pipelines_index/pipelines.js   | 22 +++++++++++-----------
 .../javascripts/commit/pipelines/pipelines_spec.js |  3 +++
 .../vue_pipelines_index/pipelines_spec.js          |  3 +++
 4 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index f2c2524908d..7cc82b50d43 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -1,5 +1,3 @@
-/* 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.');
         });
     },
   },
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
index 796fd5b581e..b6721600415 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js
+++ b/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" />
diff --git a/spec/javascripts/commit/pipelines/pipelines_spec.js b/spec/javascripts/commit/pipelines/pipelines_spec.js
index 65093e53332..bc2e092db65 100644
--- a/spec/javascripts/commit/pipelines/pipelines_spec.js
+++ b/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);
     });
diff --git a/spec/javascripts/vue_pipelines_index/pipelines_spec.js b/spec/javascripts/vue_pipelines_index/pipelines_spec.js
index b57761e3b12..725f6cb2d7a 100644
--- a/spec/javascripts/vue_pipelines_index/pipelines_spec.js
+++ b/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();
       });
     });
-- 
cgit v1.2.1