From 80b05c32de18f14c56088ebde1b1b080b382a4d2 Mon Sep 17 00:00:00 2001
From: Oskar Damkjaer <oskar.damkjaer@gmail.com>
Date: Thu, 20 May 2021 11:37:49 +0200
Subject: [PATCH 1/2] Make sure timeout is cleared properly

---
 src/browser/modules/Main/Main.tsx       |  6 +---
 src/browser/modules/Main/main.hooks.tsx | 46 +++++++++++--------------
 2 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/src/browser/modules/Main/Main.tsx b/src/browser/modules/Main/Main.tsx
index 3f7760f4889..9833acbad5e 100644
--- a/src/browser/modules/Main/Main.tsx
+++ b/src/browser/modules/Main/Main.tsx
@@ -75,11 +75,7 @@ const Main = React.memo(function Main(props: any) {
           Connection to server lost. Reconnecting...
         </WarningBanner>
       </Render>
-      <Render
-        if={
-          props.connectionState === CONNECTING_STATE && past5Sec && !past10Sec
-        }
-      >
+      <Render if={past5Sec && !past10Sec}>
         <NotAuthedBanner>Still connecting...</NotAuthedBanner>
       </Render>
       <Render if={past10Sec}>
diff --git a/src/browser/modules/Main/main.hooks.tsx b/src/browser/modules/Main/main.hooks.tsx
index 9c57e8a927a..cffc3c66c18 100644
--- a/src/browser/modules/Main/main.hooks.tsx
+++ b/src/browser/modules/Main/main.hooks.tsx
@@ -26,54 +26,50 @@ import {
   CONNECTING_STATE
 } from 'shared/modules/connections/connectionsDuck'
 
-/**
- * Custom hook for detecting slow connections
- * @param     {object}      props
- * @param     {number}      props.connectionState
- * @param     {string}      props.errorMessage
- * @param     {number}      props.lastConnectionUpdate
- * @return    {boolean[]}
- */
+const FIVE_SECONDS = 5 * 1000
+const TEN_SECONDS = 10 * 1000
+
 export function useSlowConnectionState({
   connectionState,
   errorMessage,
   lastConnectionUpdate
-}: any) {
+}: {
+  connectionState: number
+  errorMessage?: string
+  lastConnectionUpdate: number
+}): [boolean, boolean] {
   const [past5Sec, setPast5Sec] = useState(false)
   const [past10Sec, setPast10Sec] = useState(false)
-  const DELAY_5SEC = 5 * 1000 // five seconds
-  const DELAY_10SEC = 10 * 1000 // ten seconds
-  const shouldTimeConnection = () =>
-    [CONNECTING_STATE, PENDING_STATE].includes(connectionState) && !errorMessage
-  let timeout5Sec: any = null
-  let timeout10Sec: any = null
 
   useEffect(() => {
-    if (!shouldTimeConnection()) {
-      clearTimeout(timeout5Sec)
-      clearTimeout(timeout10Sec)
+    const shouldTimeConnection =
+      [CONNECTING_STATE, PENDING_STATE].includes(connectionState) &&
+      !errorMessage
+
+    if (!shouldTimeConnection) {
       setPast5Sec(false)
       setPast10Sec(false)
 
       return
     }
 
-    timeout5Sec = setTimeout(() => {
+    const timeout5Sec = setTimeout(() => {
       const diff = Date.now() - lastConnectionUpdate
 
-      setPast5Sec(diff > DELAY_5SEC)
-    }, DELAY_5SEC)
-    timeout10Sec = setTimeout(() => {
+      setPast5Sec(diff > FIVE_SECONDS)
+    }, FIVE_SECONDS)
+
+    const timeout10Sec = setTimeout(() => {
       const diff = Date.now() - lastConnectionUpdate
 
-      setPast10Sec(diff > DELAY_10SEC)
-    }, DELAY_10SEC)
+      setPast10Sec(diff > TEN_SECONDS)
+    }, TEN_SECONDS)
 
     return () => {
       clearTimeout(timeout5Sec)
       clearTimeout(timeout10Sec)
     }
-  }, [connectionState, lastConnectionUpdate])
+  }, [connectionState, lastConnectionUpdate, errorMessage])
 
   return [past5Sec, past10Sec]
 }

From f8b574dc6034d27a974f90f6ab300c21fb43765d Mon Sep 17 00:00:00 2001
From: Oskar Damkjaer <oskar.damkjaer@gmail.com>
Date: Thu, 20 May 2021 11:55:03 +0200
Subject: [PATCH 2/2] Avoid showing double messages

---
 src/browser/modules/Main/Main.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/browser/modules/Main/Main.tsx b/src/browser/modules/Main/Main.tsx
index 9833acbad5e..3f7760f4889 100644
--- a/src/browser/modules/Main/Main.tsx
+++ b/src/browser/modules/Main/Main.tsx
@@ -75,7 +75,11 @@ const Main = React.memo(function Main(props: any) {
           Connection to server lost. Reconnecting...
         </WarningBanner>
       </Render>
-      <Render if={past5Sec && !past10Sec}>
+      <Render
+        if={
+          props.connectionState === CONNECTING_STATE && past5Sec && !past10Sec
+        }
+      >
         <NotAuthedBanner>Still connecting...</NotAuthedBanner>
       </Render>
       <Render if={past10Sec}>