Merge branch 'timeago-perf' into 'master'

Improved timeago performance

Closes #25728

See merge request !8231

app/assets/javascripts/application.js

@@ -247,5 +247,7 @@ window.ES6Promise.polyfill();
     new Aside();
     // bind sidebar events
     new gl.Sidebar();
+
+    gl.utils.initTimeagoTimeout();
   });
 }).call(this);

app/assets/javascripts/lib/utils/datetime_utility.js → app/assets/javascripts/lib/utils/datetime_utility.js.es6

@@ -8,6 +8,8 @@ window.dateFormat = require('vendor/date.format');
 (function() {
   (function(w) {
     var base;
+    var timeagoInstance;
+
     if (w.gl == null) {
       w.gl = {};
     }
@@ -24,49 +26,51 @@ window.dateFormat = require('vendor/date.format');
       return this.days[date.getDay()];
     };
 
-    w.gl.utils.localTimeAgo = function($timeagoEls, setTimeago) {
-      if (setTimeago == null) {
-        setTimeago = true;
-      }
-
-      $timeagoEls.filter(':not([data-timeago-rendered])').each(function() {
-        var $el = $(this);
-        $el.attr('title', gl.utils.formatDate($el.attr('datetime')));
+    w.gl.utils.localTimeAgo = function($timeagoEls, setTimeago = true) {
+      $timeagoEls.each((i, el) => {
+        el.setAttribute('title', gl.utils.formatDate(el.getAttribute('datetime')));
 
         if (setTimeago) {
           // Recreate with custom template
-          $el.tooltip({
+          $(el).tooltip({
             template: '<div class="tooltip local-timeago" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
           });
         }
 
-        $el.attr('data-timeago-rendered', true);
-        gl.utils.renderTimeago($el);
+        el.classList.add('js-timeago-render');
       });
+
+      gl.utils.renderTimeago($timeagoEls);
     };
 
     w.gl.utils.getTimeago = function() {
-      var locale = function(number, index) {
-        return [
-          ['less than a minute ago', 'a while'],
-          ['less than a minute ago', 'in %s seconds'],
-          ['about a minute ago', 'in 1 minute'],
-          ['%s minutes ago', 'in %s minutes'],
-          ['about an hour ago', 'in 1 hour'],
-          ['about %s hours ago', 'in %s hours'],
-          ['a day ago', 'in 1 day'],
-          ['%s days ago', 'in %s days'],
-          ['a week ago', 'in 1 week'],
-          ['%s weeks ago', 'in %s weeks'],
-          ['a month ago', 'in 1 month'],
-          ['%s months ago', 'in %s months'],
-          ['a year ago', 'in 1 year'],
-          ['%s years ago', 'in %s years']
-        ][index];
-      };
-
-      timeago.register('gl_en', locale);
-      return timeago();
+      var locale;
+
+      if (!timeagoInstance) {
+        locale = function(number, index) {
+          return [
+            ['less than a minute ago', 'a while'],
+            ['less than a minute ago', 'in %s seconds'],
+            ['about a minute ago', 'in 1 minute'],
+            ['%s minutes ago', 'in %s minutes'],
+            ['about an hour ago', 'in 1 hour'],
+            ['about %s hours ago', 'in %s hours'],
+            ['a day ago', 'in 1 day'],
+            ['%s days ago', 'in %s days'],
+            ['a week ago', 'in 1 week'],
+            ['%s weeks ago', 'in %s weeks'],
+            ['a month ago', 'in 1 month'],
+            ['%s months ago', 'in %s months'],
+            ['a year ago', 'in 1 year'],
+            ['%s years ago', 'in %s years']
+          ][index];
+        };
+
+        timeago.register('gl_en', locale);
+        timeagoInstance = timeago();
+      }
+
+      return timeagoInstance;
     };
 
     w.gl.utils.timeFor = function(time, suffix, expiredLabel) {
@@ -85,9 +89,30 @@ window.dateFormat = require('vendor/date.format');
       return timefor;
     };
 
-    w.gl.utils.renderTimeago = function($element) {
-      var timeagoInstance = gl.utils.getTimeago();
-      timeagoInstance.render($element, 'gl_en');
+    w.gl.utils.cachedTimeagoElements = [];
+    w.gl.utils.renderTimeago = function($els) {
+      if (!$els && !w.gl.utils.cachedTimeagoElements.length) {
+        w.gl.utils.cachedTimeagoElements = [].slice.call(document.querySelectorAll('.js-timeago-render'));
+      } else if ($els) {
+        w.gl.utils.cachedTimeagoElements = w.gl.utils.cachedTimeagoElements.concat($els.toArray());
+      }
+
+      w.gl.utils.cachedTimeagoElements.forEach(gl.utils.updateTimeagoText);
+    };
+
+    w.gl.utils.updateTimeagoText = function(el) {
+      const timeago = gl.utils.getTimeago();
+      const formattedDate = timeago.format(el.getAttribute('datetime'), 'gl_en');
+
+      if (el.textContent !== formattedDate) {
+        el.textContent = formattedDate;
+      }
+    };
+
+    w.gl.utils.initTimeagoTimeout = function() {
+      gl.utils.renderTimeago();
+
+      gl.utils.timeagoTimeout = setTimeout(gl.utils.initTimeagoTimeout, 1000);
     };
 
     w.gl.utils.getDayDifference = function(a, b) {