Only run timeago loops after rendering timeago components

app/assets/javascripts/commit/pipelines/pipelines_store.js.es6

@@ -24,7 +24,7 @@ class PipelinesStore {
    * update the time to show how long as passed.
    *
    */
-  startTimeAgoLoops() {
+  static startTimeAgoLoops() {
     const startTimeLoops = () => {
       this.timeLoopInterval = setInterval(() => {
         this.$children[0].$children.reduce((acc, component) => {

app/assets/javascripts/commit/pipelines/pipelines_table.js.es6

@@ -71,7 +71,6 @@ require('./pipelines_store');
         .then(response => response.json())
         .then((json) => {
           this.store.storePipelines(json);
-          this.store.startTimeAgoLoops.call(this, Vue);
           this.isLoading = false;
         })
         .catch(() => {
@@ -80,6 +79,12 @@ require('./pipelines_store');
         });
     },
 
+    beforeUpdate() {
+      if (this.state.pipelines.length && this.$children) {
+        this.store.startTimeAgoLoops.call(this, Vue);
+      }
+    },
+
     template: `
       <div class="pipelines">
         <div class="realtime-loading" v-if="isLoading">

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

@@ -5,6 +5,7 @@ window.Vue = require('vue');
 require('../vue_shared/components/table_pagination');
 require('./store');
 require('../vue_shared/components/pipelines_table');
+const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_store');
 
 ((gl) => {
   gl.VuePipelines = Vue.extend({
@@ -32,8 +33,17 @@ require('../vue_shared/components/pipelines_table');
       const scope = gl.utils.getParameterByName('scope');
       if (pagenum) this.pagenum = pagenum;
       if (scope) this.apiScope = scope;
+
       this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
     },
+
+    beforeUpdate() {
+      if (this.pipelines.length && this.$children) {
+        debugger;
+        CommitPipelinesStoreWithTimeAgo.startTimeAgoLoops.call(this, Vue);
+      }
+    },
+
     methods: {
       change(pagenum, apiScope) {
         gl.utils.visitUrl(`?scope=${apiScope}&p=${pagenum}`);

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

 /* global gl, Flash */
-/* eslint-disable no-param-reassign, no-underscore-dangle */
-require('../vue_realtime_listener');
+/* eslint-disable no-param-reassign */
 
 ((gl) => {
   const pageValues = (headers) => {
@@ -21,48 +20,21 @@ require('../vue_realtime_listener');
   gl.PipelineStore = class {
     fetchDataLoop(Vue, pageNum, url, apiScope) {
       this.pageRequest = true;
-      const updatePipelineNums = (count) => {
-        const { all } = count;
-        const running = count.running_or_pending;
-        document.querySelector('.js-totalbuilds-count').innerHTML = all;
-        document.querySelector('.js-running-count').innerHTML = running;
-      };
 
-      const goFetch = () =>
-        this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`)
-          .then((response) => {
-            const pageInfo = pageValues(response.headers);
-            this.pageInfo = Object.assign({}, this.pageInfo, pageInfo);
+      return this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`)
+      .then((response) => {
+        const pageInfo = pageValues(response.headers);
+        this.pageInfo = Object.assign({}, this.pageInfo, pageInfo);
 
-            const res = JSON.parse(response.body);
-            this.count = Object.assign({}, this.count, res.count);
-            this.pipelines = Object.assign([], this.pipelines, res.pipelines);
+        const res = JSON.parse(response.body);
+        this.count = Object.assign({}, this.count, res.count);
+        this.pipelines = Object.assign([], this.pipelines, res.pipelines);
 
-            updatePipelineNums(this.count);
-            this.pageRequest = false;
-          }, () => {
-            this.pageRequest = false;
-            return new Flash('An error occurred while fetching the pipelines, please reload the page again.');
-          });
-
-      goFetch();
-
-      const startTimeLoops = () => {
-        this.timeLoopInterval = setInterval(() => {
-          this.$children[0].$children.reduce((acc, component) => {
-            const timeAgoComponent = component.$children.filter(el => el.$options._componentTag === 'time-ago')[0];
-            acc.push(timeAgoComponent);
-            return acc;
-          }, []).forEach(e => e.changeTime());
-        }, 10000);
-      };
-
-      startTimeLoops();
-
-      const removeIntervals = () => clearInterval(this.timeLoopInterval);
-      const startIntervals = () => startTimeLoops();
-
-      gl.VueRealtimeListener(removeIntervals, startIntervals);
+        this.pageRequest = false;
+      }, () => {
+        this.pageRequest = false;
+        return new Flash('An error occurred while fetching the pipelines, please reload the page again.');
+      });
     }
   };
 })(window.gl || (window.gl = {}));

changelogs/unreleased/28247-timeloops-bug.yml

+---
+title: Only run timeago loops after rendering timeago components
+merge_request:
+author: