Added longer timeouts and stop calling desired if unmounted

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/StatusPage.tsx

@@ -54,6 +54,8 @@ export const StatusPage = ({
   project_id,
   setInfraStatus,
 }: Props) => {
+  const isMounted = useRef(false);
+
   const {
     newWebsocket,
     openWebsocket,
@@ -144,7 +146,7 @@ export const StatusPage = ({
     } catch (error) {}
   };
 
-  const getDesiredState = async (infra_id: number) => {
+  const getDesiredState = async (infra_id: number, counter: number = 0) => {
     try {
       const desired = await api
         .getInfraDesired("<token>", {}, { project_id, infra_id })
@@ -158,9 +160,24 @@ export const StatusPage = ({
       connectToLiveUpdateModule(infra_id);
     } catch (error) {
       console.error(error);
-      setTimeout(() => {
-        getDesiredState(infra_id);
-      }, 500);
+      const MIN_TIMEOUT = 500;
+      const MAX_TIMEOUT = 2000;
+
+      let timeout = counter * 500;
+
+      if (timeout < MIN_TIMEOUT) {
+        timeout = MIN_TIMEOUT;
+      }
+
+      if (timeout > MAX_TIMEOUT) {
+        timeout = MAX_TIMEOUT;
+      }
+
+      if (isMounted.current) {
+        setTimeout(() => {
+          getDesiredState(infra_id, counter + 1);
+        }, timeout);
+      }
     }
   };
 
@@ -266,6 +283,13 @@ export const StatusPage = ({
     openWebsocket(websocketId);
   };
 
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
   useEffect(() => {
     getInfras();
     return () => {