push hydration back to readystate = complete

Author: Judahmeek

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

@@ -67,10 +67,10 @@ function initializePageEventListeners(): void {
   }
   isPageLifecycleInitialized = true;
 
-  if (document.readyState !== 'loading') {
+  if (document.readyState === 'complete') {
     setupPageNavigationListeners();
   } else {
-    document.addEventListener('DOMContentLoaded', setupPageNavigationListeners);
+    document.addEventListener('load', setupPageNavigationListeners);
   }
 }
 

packages/react-on-rails/tests/pageLifecycle.test.js

@@ -78,23 +78,23 @@ describe('pageLifecycle', () => {
     // Since no navigation library is mocked, callbacks should run immediately
     expect(callback).toHaveBeenCalledTimes(1);
     // Should not add DOMContentLoaded listener since readyState is not 'loading'
-    expect(addEventListenerSpy).not.toHaveBeenCalledWith('DOMContentLoaded', expect.any(Function));
+    expect(addEventListenerSpy).not.toHaveBeenCalledWith('readystatechange', expect.any(Function));
   });
 
-  it('should initialize page event listeners immediately when document.readyState is "interactive"', () => {
-    setReadyState('interactive');
+  it('should wait for readystatechange when document.readyState is "interactive"', () => {
+    setReadyState('loading');
     const callback = jest.fn();
     const { onPageLoaded } = importPageLifecycle();
 
     onPageLoaded(callback);
 
-    // Since no navigation library is mocked, callbacks should run immediately
-    expect(callback).toHaveBeenCalledTimes(1);
-    // Should not add DOMContentLoaded listener since readyState is not 'loading'
-    expect(addEventListenerSpy).not.toHaveBeenCalledWith('DOMContentLoaded', expect.any(Function));
+    // Should not call callback immediately since readyState is 'loading'
+    expect(callback).not.toHaveBeenCalled();
+    // Verify that a DOMContentLoaded listener was added when readyState is 'loading'
+    expect(addEventListenerSpy).toHaveBeenCalledWith('load', expect.any(Function));
   });
 
-  it('should wait for DOMContentLoaded when document.readyState is "loading"', () => {
+  it('should wait for readystatechange when document.readyState is "loading"', () => {
     setReadyState('loading');
     const callback = jest.fn();
     const { onPageLoaded } = importPageLifecycle();
@@ -104,7 +104,7 @@ describe('pageLifecycle', () => {
     // Should not call callback immediately since readyState is 'loading'
     expect(callback).not.toHaveBeenCalled();
     // Verify that a DOMContentLoaded listener was added when readyState is 'loading'
-    expect(addEventListenerSpy).toHaveBeenCalledWith('DOMContentLoaded', expect.any(Function));
+    expect(addEventListenerSpy).toHaveBeenCalledWith('load', expect.any(Function));
   });
 
   describe('with Turbo navigation library', () => {