Check ready state of document in public pages (#3652)

* Check ready state of document in public pages

* add check interactive

1 files changed, 21 insertions, 15 deletions

diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index 0e66108bf..4c0a3d693 100644
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -10,7 +10,7 @@ require.context('../images/', true);
 const { localeData } = getLocale();
 localeData.forEach(IntlRelativeFormat.__addLocaleData);
 
-function main() {
+function loaded() {
   const locale = document.documentElement.lang;
   const dateTimeFormat = new Intl.DateTimeFormat(locale, {
     year: 'numeric',
@@ -21,23 +21,29 @@ function main() {
   });
   const relativeFormat = new IntlRelativeFormat(locale);
 
-  document.addEventListener('DOMContentLoaded', () => {
-    [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
-      content.innerHTML = emojify(content.innerHTML);
-    });
+  [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
+    content.innerHTML = emojify(content.innerHTML);
+  });
 
-    [].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
-      const datetime = new Date(content.getAttribute('datetime'));
-      const formattedDate = dateTimeFormat.format(datetime);
-      content.title = formattedDate;
-      content.textContent = formattedDate;
-    });
+  [].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
+    const datetime = new Date(content.getAttribute('datetime'));
+    const formattedDate = dateTimeFormat.format(datetime);
+    content.title = formattedDate;
+    content.textContent = formattedDate;
+  });
 
-    [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
-      const datetime = new Date(content.getAttribute('datetime'));
-      content.textContent = relativeFormat.format(datetime);;
-    });
+  [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
+    const datetime = new Date(content.getAttribute('datetime'));
+    content.textContent = relativeFormat.format(datetime);;
   });
+}
+
+function main() {
+  if (['interactive', 'complete'].includes(document.readyState)) {
+    loaded();
+  } else {
+    document.addEventListener('DOMContentLoaded', loaded);
+  }
 
   delegate(document, '.video-player video', 'click', ({ target }) => {
     if (target.paused) {