only initiate hydration after all subresources loaded

Author: Judahmeek

packages/react-on-rails/src/pageLifecycle.ts

@@ -58,19 +58,14 @@ function setupPageNavigationListeners(): void {
   }
 }
 
-let isPageLifecycleInitialized = false;
-function initializePageEventListeners(): void {
-  if (typeof window === 'undefined') return;
-
-  if (isPageLifecycleInitialized) {
-    return;
-  }
-  isPageLifecycleInitialized = true;
-
-  if (document.readyState !== 'loading') {
-    setupPageNavigationListeners();
+function onPageReady(callback: () => void) {
+  if (document.readyState === 'complete') {
+    callback();
   } else {
-    document.addEventListener('DOMContentLoaded', setupPageNavigationListeners);
+    document.addEventListener('readystatechange', function onReadyStateChange() {
+      onPageReady(callback);
+      document.removeEventListener('readystatechange', onReadyStateChange);
+    });
   }
 }
 
@@ -79,13 +74,13 @@ export function onPageLoaded(callback: PageLifecycleCallback): void {
     void callback();
   }
   pageLoadedCallbacks.add(callback);
-  initializePageEventListeners();
+  onPageReady(setupPageNavigationListeners);
 }
 
 export function onPageUnloaded(callback: PageLifecycleCallback): void {
   if (currentPageState === 'unload') {
     void callback();
   }
   pageUnloadedCallbacks.add(callback);
-  initializePageEventListeners();
+  onPageReady(setupPageNavigationListeners);
 }