From ec3f3aa7729ec77f11fbb0f67def8130afa54c57 Mon Sep 17 00:00:00 2001
From: Jozsef Lazar <jozsef.gabor.lazar@gmail.com>
Date: Mon, 23 Jan 2023 22:21:00 +0100
Subject: [PATCH] feat(remix-react): add `timeout` prop to `LiveReload`
 component (#4036)

Co-authored-by: Pedro Cattori <pcattori@gmail.com>
---
 .changeset/wild-foxes-wait.md                      | 6 ++++++
 packages/remix-react/__tests__/components-test.tsx | 8 ++++++++
 packages/remix-react/components.tsx                | 4 +++-
 3 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/wild-foxes-wait.md

diff --git a/.changeset/wild-foxes-wait.md b/.changeset/wild-foxes-wait.md
new file mode 100644
index 00000000000..df75c737988
--- /dev/null
+++ b/.changeset/wild-foxes-wait.md
@@ -0,0 +1,6 @@
+---
+"remix": patch
+"@remix-run/react": patch
+---
+
+Configure the browser-side live reload socket timeout via the new `timeoutMs` prop on `<LiveReload />`
diff --git a/packages/remix-react/__tests__/components-test.tsx b/packages/remix-react/__tests__/components-test.tsx
index d3d76b99a5d..f9dcb330992 100644
--- a/packages/remix-react/__tests__/components-test.tsx
+++ b/packages/remix-react/__tests__/components-test.tsx
@@ -65,6 +65,14 @@ describe("<LiveReload />", () => {
         "let port = (window.__remixContext.dev && window.__remixContext.dev.liveReloadPort) || 1234;"
       );
     });
+
+    it("timeout of reload is set to 200ms", () => {
+      LiveReload = require("../components").LiveReload;
+      let { container } = render(<LiveReload timeoutMs={200} />);
+      expect(container.querySelector("script")).toHaveTextContent(
+        "setTimeout( () => remixLiveReloadConnect({ onOpen: () => window.location.reload(), }), 200 );"
+      );
+    });
   });
 });
 
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 31df2f30b9b..8075d402fdc 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -1536,9 +1536,11 @@ export const LiveReload =
     ? () => null
     : function LiveReload({
         port = Number(process.env.REMIX_DEV_SERVER_WS_PORT || 8002),
+        timeoutMs = 1000,
         nonce = undefined,
       }: {
         port?: number;
+        timeoutMs?: number;
         /**
          * @deprecated this property is no longer relevant.
          */
@@ -1582,7 +1584,7 @@ export const LiveReload =
                           remixLiveReloadConnect({
                             onOpen: () => window.location.reload(),
                           }),
-                        1000
+                      ${String(timeoutMs)}
                       );
                     }
                   };