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

2 files changed, 13 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" />