chore: use loading state for timers

frontend/src/screens/Start.tsx

@@ -22,32 +22,45 @@ export default function Start() {
   const [unlockPassword, setUnlockPassword] = React.useState("");
   const [loading, setLoading] = React.useState(false);
   const [buttonText, setButtonText] = React.useState("Login");
-  const [intervalId, setIntervalId] = React.useState<
-    NodeJS.Timeout | undefined
-  >();
-  const [timeoutId, setTimeoutId] = React.useState<
-    NodeJS.Timeout | undefined
-  >();
+  // we use this only for polling
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { data: _ } = useInfo(true);
   const { data: csrf } = useCSRF();
-  const { data: info } = useInfo(true);
   const { toast } = useToast();
 
   React.useEffect(() => {
-    return () => {
-      if (intervalId) {
+    if (!loading) {
+      return;
+    }
+    let messageIndex = 1;
+    const intervalId = setInterval(() => {
+      if (messageIndex < messages.length) {
+        setButtonText(messages[messageIndex]);
+        messageIndex++;
+      } else {
         clearInterval(intervalId);
       }
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  });
+    }, 5000);
 
-  async function asyncTimeout(ms: number): Promise<void> {
-    return new Promise((resolve) => {
-      setTimeoutId(setTimeout(resolve, ms));
-    });
-  }
+    const timeoutId = setTimeout(() => {
+      // if redirection didn't happen in 3 minutes info.running is false
+      toast({
+        title: "Failed to start",
+        description: "Please try starting the node again.",
+        variant: "destructive",
+      });
+
+      setLoading(false);
+      setButtonText("Login");
+      setUnlockPassword("");
+      return;
+    }, 180000); // wait for 3 minutes
+
+    return () => {
+      clearInterval(intervalId);
+      clearTimeout(timeoutId);
+    };
+  }, [loading, toast]);
 
   async function onSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -67,30 +80,8 @@ export default function Start() {
           unlockPassword,
         }),
       });
-
-      let messageIndex = 1;
-      setIntervalId(
-        setInterval(() => {
-          if (messageIndex < messages.length) {
-            setButtonText(messages[messageIndex]);
-            messageIndex++;
-          } else {
-            clearInterval(intervalId);
-          }
-        }, 5000)
-      );
-
-      await asyncTimeout(180000); // wait for 3 minutes
-      if (!info?.running) {
-        toast({
-          title: "Failed to start",
-          description: "Please try starting the node again.",
-          variant: "destructive",
-        });
-      }
     } catch (error) {
       handleRequestError(toast, "Failed to connect", error);
-    } finally {
       setLoading(false);
       setButtonText("Login");
       setUnlockPassword("");

frontend/src/screens/setup/SetupFinish.tsx

@@ -15,9 +15,11 @@ import { request } from "src/utils/request";
 export function SetupFinish() {
   const navigate = useNavigate();
   const { nodeInfo, unlockPassword } = useSetupStore();
-
-  const { data: info } = useInfo(true);
+  // we use this only for polling
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { data: _ } = useInfo(true);
   const { data: csrf } = useCSRF();
+  const [loading, setLoading] = React.useState(false);
   const [connectionError, setConnectionError] = React.useState(false);
   const hasFetchedRef = React.useRef(false);
 
@@ -31,13 +33,20 @@ export function SetupFinish() {
   };
 
   useEffect(() => {
+    if (!loading) {
+      return;
+    }
     const timer = setTimeout(() => {
-      if (!info?.running) {
-        setConnectionError(true);
-      }
+      // SetupRedirect takes care of redirection once info.running is true
+      // if it still didn't redirect after 3 minutes, we show an error
+      setLoading(false);
+      setConnectionError(true);
     }, 180000);
-    return () => clearTimeout(timer);
-  }, [info?.running]);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [loading]);
 
   useEffect(() => {
     // ensure setup call is only called once
@@ -47,9 +56,11 @@ export function SetupFinish() {
     hasFetchedRef.current = true;
 
     (async () => {
+      setLoading(true);
       const succeeded = await finishSetup(csrf, nodeInfo, unlockPassword);
       // only setup call is successful as start is async
       if (!succeeded) {
+        setLoading(false);
         setConnectionError(true);
       }
     })();