fix(remix-react): Firefox LiveReload

[ryanflorence]

Firefox infinitely reloads the page as long as <LiveReload> is rendering.

Closes #4692

[changeset-bot]

🦋 Changeset detected

Latest commit: 28f803c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@remix-run/react	Patch
create-remix	Patch
remix	Patch
@remix-run/architect	Patch
@remix-run/cloudflare	Patch
@remix-run/cloudflare-pages	Patch
@remix-run/cloudflare-workers	Patch
@remix-run/deno	Patch
@remix-run/dev	Patch
@remix-run/eslint-config	Patch
@remix-run/express	Patch
@remix-run/netlify	Patch
@remix-run/node	Patch
@remix-run/serve	Patch
@remix-run/server-runtime	Patch
@remix-run/vercel	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[danieljb]

Hi. When I first had this issue I did some digging and might have an idea of what’s happening:

1. files change
2. [Chrome, Firefox] websocket receives message type: RELOAD, triggers window.location.reload
3. [Chrome, Firefox] start reload Navigated to http://localhost:3000/
4. [Firefox] closes the websocket connection code: 1001
5. [Firefox] sets timeout to call remixLiveReloadConnect
6. [Firefox] timeout completes before reload is complete and calls:
   remixLiveReloadConnect({ onOpen() { /* … */ } })
7. [Firefox] re-connects to the websocket, calls onOpen method that triggers another window.location.reload starting the infinite reloading

My conclusion is Firefox does not in fact call onclose upon connecting. It is the other way around, the connection is closed and tries to reconnect before the browser fully unloads the page. Both Chrome and Safari seem to only send the websocket close event when the dev server is stopped and not when the page reloads.

The reason why the onOpen config was introduced was to enable automatic re-connection when the dev server is stopped and restarted. When that happens the CloseEvent is sent with code 1006 which is why both of us came up with the event.code === 1006 check.

This fixes the infinite reloads. But the issue on Firefox is actually a race condition. When the timeout is increased (e.g. to 10000) the page reload reliably finishes before the timeout re-initializes, re-connects to the websocket and the reloads loop kicks in.