Skip to content

Make sure renderInit only runs after DOMContentLoaded#1540

Merged
justin808 merged 6 commits intomasterfrom
judahmeek/registration-fix
Jun 1, 2023
Merged

Make sure renderInit only runs after DOMContentLoaded#1540
justin808 merged 6 commits intomasterfrom
judahmeek/registration-fix

Conversation

@Judahmeek
Copy link
Copy Markdown
Contributor

@Judahmeek Judahmeek commented May 27, 2023

Fixed the race condition revealed by #1539

This change is Reviewable

Comment thread node_package/src/clientStartup.ts Outdated
Comment thread node_package/src/clientStartup.ts
Comment thread node_package/src/clientStartup.ts Outdated
// 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
Copy Markdown
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

Comment thread node_package/src/clientStartup.ts Outdated
if (document.readyState === 'complete') {
window.setTimeout(renderInit);
} else {
document.addEventListener('DOMContentLoaded', renderInit);
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
AbanoubGhadban pushed a commit that referenced this pull request Sep 25, 2025
Changes to spec/dummy:

* Modified tsconfig.json in order to stop webpack recompilation loop
* Updated react_on_rails to stop component initialization race condition
per [ROR1540](#1540)
* Modified prettierignore file to ignore generated packs
* Provided render_options to load_pack_for_generated_component per
[ROR1545](#1545)
AbanoubGhadban pushed a commit that referenced this pull request Sep 26, 2025
Changes to spec/dummy:

* Modified tsconfig.json in order to stop webpack recompilation loop
* Updated react_on_rails to stop component initialization race condition
per [ROR1540](#1540)
* Modified prettierignore file to ignore generated packs
* Provided render_options to load_pack_for_generated_component per
[ROR1545](#1545)
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