Improved Performance by delaying Tooltip setup for localtimeago

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

@@ -125,6 +125,7 @@ export const getTimeago = () => {
 
     timeago.register(timeagoLanguageCode, locale);
     timeago.register(`${timeagoLanguageCode}-remaining`, localeRemaining);
+
     timeagoInstance = timeago();
   }
 
@@ -142,6 +143,19 @@ export const renderTimeago = $els => {
   getTimeago().render(timeagoEls, timeagoLanguageCode);
 };
 
+/**
+ * For the given elements, will add timeago tooltips
+ */
+export const addTimeAgoTooltip = () => {
+  const timeagoEls = document.querySelectorAll('.js-timeago-render');
+  timeagoEls.forEach(element => {
+    $(element).tooltip({
+      template:
+        '<div class="tooltip local-timeago" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
+    });
+  });
+};
+
 /**
  * For the given elements, sets a tooltip with a formatted date.
  * @param {jQuery}
@@ -149,18 +163,14 @@ export const renderTimeago = $els => {
  */
 export const localTimeAgo = ($timeagoEls, setTimeago = true) => {
   $timeagoEls.each((i, el) => {
-    if (setTimeago) {
-      // Recreate with custom template
-      $(el).tooltip({
-        template:
-          '<div class="tooltip local-timeago" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
-      });
-    }
-
     el.classList.add('js-timeago-render');
   });
 
   renderTimeago($timeagoEls);
+
+  if (setTimeago) {
+    requestIdleCallback(addTimeAgoTooltip);
+  }
 };
 
 /**