Remix App readyStateChange never gets out of "loading" / Window.onload/load also never completes

[owlyowl]

Issue summary

When trying to install a 3rd party widget their boot script never embeds because:

1. document.readyState will stay in a "loading" status permanently
2. window.onload will never fire as the status load is never achieved

The workaround currently is to use useEffect to raise an event and modify the 3rd party boot script.

 if (document.readyState === "complete") {
      l();
    } else if (w.attachEvent) {
      w.attachEvent("onload", l);
    } else {
      w.addEventListener("load", l, false);
      d.addEventListener('LaunchMe', l); ---This has been added as an extra step
    }

  useEffect(() => {
    document.dispatchEvent(new Event('LaunchMe'));
  }, []);

It could be linked to this issue but I am doubtful:
#364

• @shopify/shopify-app-remix version: 2.0.2
• Node version: 18
• Operating system: Windows 11

Expected behavior

Embedded app iframe should complete document/window ready/load states correctly

Actual behavior

document.readyState is permanently "loading"
window load never fires

Steps to reproduce the problem

1. Add a script to the template below
2. Observe that load never fires or document.readyStateChange

        <script
          dangerouslySetInnerHTML={{
            __html: `
              if (window.document.readyState === 'complete') {
                console.info('window is already loaded.');
              } else {
                window.addEventListener('load', () => {
                  console.info('window has finished loading.');
                });
              }

              const logEntryExitPoints = (eventName) => {
                console.info(\`Entering \${eventName}\`);
                window.addEventListener(eventName, () => {
                  console.info(\`Exiting \${eventName}\`);
                });
              };

              document.addEventListener('readystatechange', () => {
                console.info(\`document readystatechange fired.. New state: \${document.readyState}\`);
              });

              logEntryExitPoints('load');
              logEntryExitPoints('readystatechange');
            `,
          }}
        />

[paulomarg]

Hey, thanks for reporting this, and finding a workaround!

We'll investigate why that event never fires, but I can see it happening for a couple of reasons:

• Maybe the SSR of the page spoofs the document variable that way, so that code might fail somehow on the server side before it reaches the frontend
• Maybe there is some interaction with App Bridge reloading the page before it loads (which can happen sometimes)

For now I'd suggest sticking with useEffect as a way to ensure that things run properly.

[lizkenyon]

Closing this issue. If you are still experiencing the problem you can reopen.