Trigger turbo load on domcontentloaded

[jjla26]

• Added console logs to track the start, state changes, and interactions within the PageObserver.
• Implemented handling for scripts loaded with the defer attribute, ensuring that DOMContentLoaded is awaited before firing turbo:load.

[brunoprietog]

Can you elaborate a bit more on the issue to have a better understanding? Also, I don't think it's appropriate to put so many console logs in production.

[amohamed97]

@brunoprietog It's addressing #1492

[jjla26]

@brunoprietog Apologies for the confusion. This PR was originally intended for our internal fork.

However, since it's here, I'd like to explain the problem we encountered:

When Turbo is loaded with the defer attribute, the turbo:load event doesn't fire at the optimal time.
Current behavior:
Deferred scripts execute when document.readyState is "interactive" (after HTML parsing completes).
The PageObserver.start() method only adds a readystatechange listener for future state changes.
If the script loads when readyState is already "interactive" (which is the normal for a deferred script), it only catches the transition to "complete".
This means turbo:load fires after all assets (CSS, images, fonts, tracking scripts) have loaded causing a significant delay
Real-world impact:
In our application, this delay meant interactive features weren't available until all page assets loaded, creating a poor user experience.

[jjla26]

As @amohamed97 mentioned, we're attempting to address #1492. However, we'd appreciate your feedback on whether there's an intentional reason for the current behavior, or if perhaps we're misunderstanding how Turbo is meant to be loaded in modern bundler setups.