Only renders empty state for pipelines table if no pipelines are received when request is made

1 files changed, 17 insertions, 10 deletions

diff --git a/app/assets/javascripts/pipelines/pipelines.js b/app/assets/javascripts/pipelines/pipelines.js
index 050551e5075..d6952d1ee5f 100644
--- a/app/assets/javascripts/pipelines/pipelines.js
+++ b/app/assets/javascripts/pipelines/pipelines.js
@@ -1,12 +1,12 @@
 import Visibility from 'visibilityjs';
 import PipelinesService from './services/pipelines_service';
 import eventHub from './event_hub';
-import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
+import pipelinesTableComponent from '../vue_shared/components/pipelines_table';
 import tablePagination from '../vue_shared/components/table_pagination.vue';
-import EmptyState from './components/empty_state.vue';
-import ErrorState from './components/error_state.vue';
-import NavigationTabs from './components/navigation_tabs';
-import NavigationControls from './components/nav_controls';
+import emptyState from './components/empty_state.vue';
+import errorState from './components/error_state.vue';
+import navigationTabs from './components/navigation_tabs';
+import navigationControls from './components/nav_controls';
 import loadingIcon from '../vue_shared/components/loading_icon.vue';
 import Poll from '../lib/utils/poll';
 
@@ -20,11 +20,11 @@ export default {
 
   components: {
     tablePagination,
-    'pipelines-table-component': PipelinesTableComponent,
-    'empty-state': EmptyState,
-    'error-state': ErrorState,
-    'navigation-tabs': NavigationTabs,
-    'navigation-controls': NavigationControls,
+    pipelinesTableComponent,
+    emptyState,
+    errorState,
+    navigationTabs,
+    navigationControls,
     loadingIcon,
   },
 
@@ -52,6 +52,7 @@ export default {
       hasError: false,
       isMakingRequest: false,
       updateGraphDropdown: false,
+      hasMadeRequest: false,
     };
   },
 
@@ -78,6 +79,7 @@ export default {
     shouldRenderEmptyState() {
       return !this.isLoading &&
         !this.hasError &&
+        this.hasMadeRequest &&
         !this.state.pipelines.length &&
         (this.scope === 'all' || this.scope === null);
     },
@@ -150,6 +152,10 @@ export default {
     if (!Visibility.hidden()) {
       this.isLoading = true;
       poll.makeRequest();
+    } else {
+      // If tab is not visible we need to make the first request so we don't show the empty
+      // state without knowing if there are any pipelines
+      this.fetchPipelines();
     }
 
     Visibility.change(() => {
@@ -202,6 +208,7 @@ export default {
 
       this.isLoading = false;
       this.updateGraphDropdown = true;
+      this.hasMadeRequest = true;
     },
 
     errorCallback() {