Fix failure to render during interactive readyState (#1152)

shakacode · Oct 6, 2018 · ad7cc2d · ad7cc2d
1 parent 3283f3d
commit ad7cc2d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 41 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@ Please follow the recommendations outlined at [keepachangelog.com](http://keepac
 Changes since last non-beta release.
 
 *Please add entries here for your pull requests that are not yet released.*
+- Fix additional cases of client startup failing during interactive readyState
 
 ### [11.1.5] - 2018-09-12
 #### Fixed

diff --git a/node_package/src/clientStartup.js b/node_package/src/clientStartup.js
@@ -177,6 +177,32 @@ function reactOnRailsPageUnloaded() {
   forEachComponent(unmount);
 }
 
+function renderInit() {
+  // Install listeners when running on the client (browser).
+  // We must do this check for turbolinks AFTER the document is loaded because we load the
+  // Webpack bundles first.
+  if (!turbolinksInstalled() || !turbolinksSupported()) {
+    debugTurbolinks('NOT USING TURBOLINKS: calling reactOnRailsPageLoaded');
+    reactOnRailsPageLoaded();
+    return;
+  }
+
+  if (turbolinksVersion5()) {
+    debugTurbolinks(
+      'USING TURBOLINKS 5: document added event listeners ' +
+      'turbolinks:before-render and turbolinks:render.');
+    document.addEventListener('turbolinks:before-render', reactOnRailsPageUnloaded);
+    document.addEventListener('turbolinks:render', reactOnRailsPageLoaded);
+    reactOnRailsPageLoaded();
+  } else {
+    debugTurbolinks(
+      'USING TURBOLINKS 2: document added event listeners page:before-unload and ' +
+      'page:change.');
+    document.addEventListener('page:before-unload', reactOnRailsPageUnloaded);
+    document.addEventListener('page:change', reactOnRailsPageLoaded);
+  }
+}
+
 export function clientStartup(context) {
   const document = context.document;
 
@@ -196,45 +222,9 @@ export function clientStartup(context) {
 
   debugTurbolinks('Adding DOMContentLoaded event to install event listeners.');
 
-  window.setTimeout(() => {
-    if (!turbolinksInstalled() || !turbolinksSupported()) {
-      if (document.readyState === 'complete') {
-        debugTurbolinks(
-          'NOT USING TURBOLINKS: DOM is already loaded, calling reactOnRailsPageLoaded',
-        );
-
-        reactOnRailsPageLoaded();
-      } else {
-        document.addEventListener('DOMContentLoaded', () => {
-          debugTurbolinks(
-            'NOT USING TURBOLINKS: DOMContentLoaded event, calling reactOnRailsPageLoaded',
-          );
-          reactOnRailsPageLoaded();
-        });
-      }
-    }
-  });
-
-  document.addEventListener('DOMContentLoaded', () => {
-    // Install listeners when running on the client (browser).
-    // We must do this check for turbolinks AFTER the document is loaded because we load the
-    // Webpack bundles first.
-
-    if (turbolinksInstalled() && turbolinksSupported()) {
-      if (turbolinksVersion5()) {
-        debugTurbolinks(
-          'USING TURBOLINKS 5: document added event listeners ' +
-          'turbolinks:before-render and turbolinks:render.');
-        document.addEventListener('turbolinks:before-render', reactOnRailsPageUnloaded);
-        document.addEventListener('turbolinks:render', reactOnRailsPageLoaded);
-        reactOnRailsPageLoaded();
-      } else {
-        debugTurbolinks(
-          'USING TURBOLINKS 2: document added event listeners page:before-unload and ' +
-          'page:change.');
-        document.addEventListener('page:before-unload', reactOnRailsPageUnloaded);
-        document.addEventListener('page:change', reactOnRailsPageLoaded);
-      }
-    }
-  });
+  if (document.readyState === 'complete') {
+    window.setTimeout(renderInit);
+  } else {
+    document.addEventListener('DOMContentLoaded', renderInit);
+  }
 }