Guarantee only one state is shown at a time31189-pipelines-error-state

1 files changed, 18 insertions, 5 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index 7438faeadf4..68a1c1de1df 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -55,7 +55,15 @@ export default Vue.component('pipelines-table', {
     },
 
     shouldRenderEmptyState() {
-      return !this.state.pipelines.length && !this.isLoading;
+      return !this.state.pipelines.length &&
+        !this.isLoading &&
+        !this.hasError;
+    },
+
+    shouldRenderTable() {
+      return !this.isLoading &&
+        this.state.pipelines.length > 0 &&
+        !this.hasError;
     },
   },
 
@@ -145,8 +153,12 @@ export default Vue.component('pipelines-table', {
 
   template: `
     <div class="content-list pipelines">
-      <div class="realtime-loading" v-if="isLoading">
-        <i class="fa fa-spinner fa-spin"></i>
+      <div
+        class="realtime-loading"
+        v-if="isLoading">
+        <i
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true" />
       </div>
 
       <empty-state
@@ -155,8 +167,9 @@ export default Vue.component('pipelines-table', {
 
       <error-state v-if="shouldRenderErrorState" />
 
-      <div class="table-holder"
-        v-if="!isLoading && state.pipelines.length > 0">
+      <div
+        class="table-holder"
+        v-if="shouldRenderTable">
         <pipelines-table-component
           :pipelines="state.pipelines"
           :service="service" />