Fix failure to render during interactive readyState

shakacode · Oct 3, 2018 · 7bde2d1 · 7bde2d1
1 parent 3283f3d
commit 7bde2d1
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);
+ }
 }