Only load pipelines vue component when there are pipelines.

app/assets/javascripts/vue_pipelines_index/pipelines.js.es6

@@ -40,20 +40,26 @@
     },
     template: `
       <div>
-        <div class="pipelines realtime-loading" v-if='pipelines.length < 1'>
+        <div class="pipelines realtime-loading" v-if='pageRequest'>
           <i class="fa fa-spinner fa-spin"></i>
         </div>
-        <div class="table-holder" v-if='pipelines.length'>
+
+        <div class="blank-state blank-state-no-icon"
+          v-if="!pageRequest && pipelines.length === 0">
+          <h2 class="blank-state-title js-blank-state-title">
+            No pipelines to show
+          </h2>
+        </div>
+
+        <div class="table-holder" v-if='!pageRequest && pipelines.length'>
           <pipelines-table-component
             :pipelines='pipelines'
             :svgs='svgs'>
           </pipelines-table-component>
         </div>
-        <div class="pipelines realtime-loading" v-if='pageRequest'>
-          <i class="fa fa-spinner fa-spin"></i>
-        </div>
+
         <gl-pagination
-          v-if='pageInfo.total > pageInfo.perPage'
+          v-if='!pageRequest && pipelines.length && pageInfo.total > pageInfo.perPage'
           :pagenum='pagenum'
           :change='change'
           :count='count.all'

app/assets/javascripts/vue_pipelines_index/store.js.es6

@@ -20,6 +20,7 @@
 
   gl.PipelineStore = class {
     fetchDataLoop(Vue, pageNum, url, apiScope) {
+      this.pageRequest = true;
       const updatePipelineNums = (count) => {
         const { all } = count;
         const running = count.running_or_pending;
@@ -41,7 +42,7 @@
             this.pageRequest = false;
           }, () => {
             this.pageRequest = false;
-            return new Flash('Something went wrong on our end.');
+            return new Flash('An error occurred while fetching the pipelines, please reload the page again.');
           });
 
       goFetch();

app/views/projects/merge_requests/_show.html.haml

@@ -94,6 +94,7 @@
       #commits.commits.tab-pane
         -# This tab is always loaded via AJAX
       #pipelines.pipelines.tab-pane
+        - if @pipelines.any?
           = render 'projects/commit/pipelines_list', endpoint: pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
       #diffs.diffs.tab-pane
         -# This tab is always loaded via AJAX

app/views/projects/pipelines/index.html.haml

@@ -36,10 +36,6 @@
         = link_to ci_lint_path, class: 'btn btn-default' do
           %span CI Lint
   .content-list.pipelines{ data: { url: namespace_project_pipelines_path(@project.namespace, @project, format: :json) } }
-    - if @pipelines.blank?
-      %div
-        .nothing-here-block No pipelines to show
-    - else
     .pipeline-svgs{ "data" => {"commit_icon_svg" => custom_icon("icon_commit"),
       "icon_status_canceled" => custom_icon("icon_status_canceled"),
       "icon_status_running" => custom_icon("icon_status_running"),