Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make sure renderInit only runs after DOMContentLoaded #1540

Merged
merged 6 commits into from
Jun 1, 2023

Conversation

Judahmeek
Copy link
Contributor

@Judahmeek Judahmeek commented May 27, 2023

Fixed the race condition revealed by #1539

This change is Reviewable

// If lazy asynch loading is used, such as with loadable-components, then the init
// function will install some handler that will properly know when to do hyrdation.
if (document.readyState !== 'loading') {
if (document.readyState === 'complete') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the way the code used to be, which I changed in 7b301f9.

We need to ensure that we don't break the use case of loadable-components.

Maybe we should allow an opt-in to loading scripts so long as the readState !== 'loading'?

CC: @Romex91 @AbanoubGhadban

// If lazy asynch loading is used, such as with loadable-components, then the init
// function will install some handler that will properly know when to do hyrdation.
if (document.readyState !== 'loading') {
if (document.readyState === 'complete') {
window.setTimeout(renderInit);
} else {
document.addEventListener('DOMContentLoaded', renderInit);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From MDN:

  1. The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
  2. readyState === 'complete': The document and all sub-resources have finished loading. The state indicates that the load event is about to fire.

The event listener and the if statement correspond to different stages of page load.

Should it be something like the code below?

function onPageReady(callback) {
  if (document.readyState === "complete") {
    callback();
  } else {
    document.addEventListener("readystatechange", function onReadyStateChange() {
        onPageReady(callback);
        document.removeEventListener("readystatechange", onReadyStateChange);
    });
  }
}

Copy link
Contributor Author

@Judahmeek Judahmeek May 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, you're right, @Romex91.

Do you think this change, with your suggestions included, could cause any sort of performance regression for our clients?

@Judahmeek Judahmeek force-pushed the judahmeek/registration-fix branch from 84ad614 to 6739ecf Compare May 30, 2023 22:32
@Judahmeek Judahmeek force-pushed the judahmeek/registration-fix branch from 6739ecf to a46fc0f Compare May 30, 2023 23:36
@Judahmeek Judahmeek requested a review from justin808 May 31, 2023 16:11
@Judahmeek
Copy link
Contributor Author

@Judahmeek this PR is ready to merge.

@justin808 justin808 merged commit 73e0f7a into master Jun 1, 2023
@justin808 justin808 deleted the judahmeek/registration-fix branch June 1, 2023 00:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants