Clear intervals & timeouts on unmount (#4452)

* Clear intervals & timeouts on unmount

* Cleanup timeouts from contracts & load deployment

Author: zaelgohary

packages/playground/src/components/TfNavigationLoader.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { computed, ref, type StyleValue, watch } from "vue";
+import { computed, onUnmounted, ref, type StyleValue, watch } from "vue";
 
 import { useNavigationStatus, useOnline } from "../hooks";
 
@@ -72,6 +72,10 @@ export default {
       };
     });
 
+    onUnmounted(() => {
+      clear();
+    });
+
     return { loadingValue, style };
   },
 };

packages/playground/src/components/TfOfflineNotifier.vue

@@ -10,16 +10,14 @@
       </VCardText>
 
       <VCardActions v-if="failed" class="d-flex justify-center mb-4">
-        <VBtn prepend-icon="mdi-reload" variant="outlined" color="secondary" @click="reload">
-          Reload Now
-        </VBtn>
+        <VBtn prepend-icon="mdi-reload" variant="outlined" color="secondary" @click="reload"> Reload Now </VBtn>
       </VCardActions>
     </VCard>
   </VDialog>
 </template>
 
 <script lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, onUnmounted, ref, watch } from "vue";
 
 import { useOffline } from "../hooks";
 
@@ -81,6 +79,13 @@ export default {
           can reload instantly.`;
     });
 
+    onUnmounted(() => {
+      if (interval) {
+        clearInterval(interval);
+        interval = null;
+      }
+    });
+
     return { offline, failed, reload, dotCount, title, description };
   },
 };

packages/playground/src/components/contracts_list/contracts_table.vue

@@ -321,7 +321,7 @@ import { ContractStates, type GridClient, type OverdueDetails } from "@threefold
 import { type Contract, ContractState, type NodeStatus } from "@threefold/gridproxy_client";
 import { TFChainError } from "@threefold/tfchain_client";
 import { DeploymentKeyDeletionError } from "@threefold/types";
-import { capitalize, computed, defineComponent, type PropType, type Ref, ref, watch } from "vue";
+import { capitalize, computed, defineComponent, onUnmounted, type PropType, type Ref, ref, watch } from "vue";
 
 import { useProfileManagerController } from "@/components/profile_manager_controller.vue";
 import type { VDataTableHeader } from "@/types";
@@ -423,6 +423,7 @@ const freeBalance = computed(() => balance.value?.free ?? 0);
 const unlockContractLoading = ref(false);
 const unlockDialog = ref(false);
 const rentContracts = ref<{ [key: number]: number }>({}); // to store the node id with its rent contract
+const timeouts: ReturnType<typeof setTimeout>[] = [];
 const selectedLockedContracts = computed(() => {
   if (selectedContracts.value.length == 0) return false;
   for (const contract of selectedContracts.value) {
@@ -615,7 +616,8 @@ async function unlockContract(contractId: number[]) {
       `Your request to unlock contract ${contractId} has been processed successfully. Changes may take a few minutes to reflect`,
       ToastType.info,
     );
-    setTimeout(() => emits("update:unlock-contracts"), 30000);
+    const timeoutId = setTimeout(() => emits("update:unlock-contracts"), 30000);
+    timeouts.push(timeoutId);
     contractStateDialog.value = false;
     unlockDialog.value = false;
     selectedContracts.value = [];
@@ -629,6 +631,12 @@ async function unlockContract(contractId: number[]) {
 watch(contractStateDialog, contractStateDialog => {
   if (!contractStateDialog) selectedItem.value = undefined;
 });
+
+onUnmounted(() => {
+  timeouts.forEach(timeout => clearTimeout(timeout));
+  timeouts.length = 0;
+});
+
 defineExpose({
   reset() {
     rentContracts.value = {};

packages/playground/src/components/deposit_dialog.vue

@@ -7,9 +7,7 @@
       @update:model-value="closeDialog"
     >
       <v-card>
-        <VCardTitle class="bg-primary">
-          Deposit TFT
-        </VCardTitle>
+        <VCardTitle class="bg-primary"> Deposit TFT </VCardTitle>
         <v-card-text>
           <v-container>
             <v-row class="py-2">
@@ -20,9 +18,7 @@
                     {{ selectedName ? selectedName.charAt(0).toUpperCase() + selectedName.slice(1) : "" }}
                     transaction.
                   </p>
-                  <p class="mt-1 mb-8 text-secondary text-sm-subtitle-2 font-weight-bold">
-                    Deposit fee is 1 TFT
-                  </p>
+                  <p class="mt-1 mb-8 text-secondary text-sm-subtitle-2 font-weight-bold">Deposit fee is 1 TFT</p>
                 </div>
                 <input-tooltip
                   v-if="selectedName == 'stellar'"
@@ -53,19 +49,15 @@
               <v-col>
                 <QRPlayStore :qr="qrCodeText">
                   <b> OR </b>
-                  <p class="mb-3">
-                    Use ThreeFold Connect to scan this QRcode:
-                  </p>
+                  <p class="mb-3">Use ThreeFold Connect to scan this QRcode:</p>
                 </QRPlayStore>
               </v-col>
             </v-row>
           </v-container>
           <v-divider />
         </v-card-text>
         <v-card-actions class="justify-end my-1 mr-2">
-          <v-btn color="anchor" @click="closeDialog">
-            Close
-          </v-btn>
+          <v-btn color="anchor" @click="closeDialog"> Close </v-btn>
           <v-btn color="secondary" :href="manual.tft_bridges" target="_blank" text="Learn more?" />
         </v-card-actions>
       </v-card>
@@ -157,6 +149,10 @@ const closeDialog = () => {
 
 onBeforeUnmount(() => {
   destroyed = true;
+  if (interval.value !== null) {
+    window.clearInterval(interval.value);
+    interval.value = null;
+  }
 });
 </script>
 <script lang="ts">

packages/playground/src/dashboard/components/node_details.vue

@@ -84,7 +84,7 @@
 
 <script setup lang="ts">
 import type { GridNode } from "@threefold/gridproxy_client";
-import { onMounted, type PropType, ref } from "vue";
+import { onMounted, onUnmounted, type PropType, ref } from "vue";
 
 import { gridProxyClient } from "@/clients";
 import type { NodeDetailsCard } from "@/types";
@@ -202,14 +202,20 @@ function loadingDots() {
     dots.value += ".";
   }
 }
+
+onUnmounted(() => {
+  if (interval.value !== null) {
+    window.clearInterval(interval.value);
+    interval.value = null;
+  }
+});
 </script>
 
 <script lang="ts">
 import CardDetails from "@/components/node_details_cards/card_details.vue";
 import GPUDetailsCard from "@/components/node_details_cards/gpu_details_card.vue";
 
 export default {
-   
   name: "NodeDetails",
   components: {
     CardDetails,

packages/playground/src/utils/load_deployment.ts

@@ -69,21 +69,36 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
       }
       return res;
     });
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
     const timeoutPromise = new Promise((resolve, reject) => {
-      setTimeout(() => {
+      timeoutId = setTimeout(() => {
         reject(new Error("Timeout"));
       }, window.env.TIMEOUT);
     });
 
     try {
-      const result = await Promise.race([machinePromise, timeoutPromise]);
+      const result = await Promise.race([
+        machinePromise.finally(() => {
+          if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+          }
+        }),
+        timeoutPromise.finally(() => {
+          timeoutId = null;
+        }),
+      ]);
       if (result instanceof Error && result.message === "Timeout") {
         console.error(`Timeout loading deployment with name ${name}`);
         return null;
       } else {
         return result;
       }
     } catch (e) {
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
       console.error(`Failed to load deployment with name ${name}:\n${normalizeError(e, "No errors were provided.")}`);
       failedDeployments.push({ name, nodes: nodeIds, contracts: contracts });
     }
@@ -188,13 +203,26 @@ export async function loadK8s(grid: GridClient) {
 
         return res;
       });
+      let timeoutId: ReturnType<typeof setTimeout> | null = null;
       const timeoutPromise = new Promise((resolve, reject) => {
-        setTimeout(() => {
+        timeoutId = setTimeout(() => {
           reject(new Error("Timeout"));
         }, window.env.TIMEOUT);
       });
 
-      const result = await Promise.race([clusterPromise, timeoutPromise]);
+      const result = await Promise.race([
+        clusterPromise.finally(() => {
+          // Clear timeout if main promise resolves/rejects first
+          if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+          }
+        }),
+        timeoutPromise.finally(() => {
+          // Clear timeout reference when timeout promise resolves/rejects
+          timeoutId = null;
+        }),
+      ]);
       if (result instanceof Error && result.message === "Timeout") {
         console.error(`Timeout loading deployment with name ${name}`);
         return null;

packages/playground/src/weblets/profile_manager.vue

@@ -160,7 +160,7 @@
   </VDialog>
 </template>
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { nextTick } from "vue";
 import { useTheme } from "vuetify";
 
@@ -246,7 +246,9 @@ const profileManagerController = useProfileManagerController();
 const balance = profileManagerController.balance;
 const freeBalance = computed(() => balance.value?.free ?? 0);
 const kyc = useKYC();
-let interval: any;
+let interval: ReturnType<typeof setInterval> | null = null;
+const timeouts: ReturnType<typeof setTimeout>[] = [];
+
 watch(
   () => profileManager.profile,
   profile => {
@@ -258,6 +260,10 @@ watch(
     } else {
       kyc.clear();
       if (interval) clearInterval(interval);
+      interval = null;
+      // Clear all pending timeouts
+      timeouts.forEach(timeout => clearTimeout(timeout));
+      timeouts.length = 0;
       balance.value = undefined;
     }
   },
@@ -277,6 +283,16 @@ onMounted(async () => {
   await mounted();
 });
 
+onUnmounted(() => {
+  if (interval) {
+    clearInterval(interval);
+    interval = null;
+  }
+  // Clear all pending timeouts
+  timeouts.forEach(timeout => clearTimeout(timeout));
+  timeouts.length = 0;
+});
+
 async function handleProfileDialog(value: boolean) {
   emit("update:modelValue", value);
   if (profileManager?.profile && value) __loadBalance(profileManager.profile);
@@ -305,7 +321,8 @@ async function __loadBalance(profile?: Profile, tries = 1) {
       return;
     }
 
-    setTimeout(() => __loadBalance(profile, tries + 1), Math.floor(Math.exp(tries) * 1_000));
+    const timeoutId = setTimeout(() => __loadBalance(profile, tries + 1), Math.floor(Math.exp(tries) * 1_000));
+    timeouts.push(timeoutId);
   }
 }
 profileManagerController.set({ loadBalance: __loadBalance });

packages/playground/src/weblets/tf_contracts_list.vue

@@ -258,7 +258,7 @@
 import type { ContractsOverdue, GridClient } from "@threefold/grid_client";
 import { type Contract, ContractState, NodeStatus, SortByContracts, SortOrder } from "@threefold/gridproxy_client";
 import { DeploymentKeyDeletionError } from "@threefold/types";
-import { computed, defineComponent, onMounted, type Ref, ref } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type Ref, ref } from "vue";
 
 import ContractsTable from "@/components/contracts_list/contracts_table.vue";
 import { useProfileManagerController } from "@/components/profile_manager_controller.vue";
@@ -314,6 +314,7 @@ const nodeInfo: Ref<{ [nodeId: number]: { status: NodeStatus } }> = ref({});
 const unlockContractLoading = ref<boolean>(false);
 const contractsTable = ref<(typeof ContractsTable)[]>([]);
 const loadingLockDetails = ref(false);
+const timeouts: ReturnType<typeof setTimeout>[] = [];
 const nodeIDs = computed<number[]>(() => {
   const ids = new Set<number>();
   for (const contract of contracts.value) {
@@ -329,6 +330,11 @@ onMounted(() => {
   loadContracts();
 });
 
+onUnmounted(() => {
+  timeouts.forEach(timeout => clearTimeout(timeout));
+  timeouts.length = 0;
+});
+
 async function _normalizeContracts(
   contracts: Contract[],
   contractType: ContractType.Node | ContractType.Name | ContractType.Rent,
@@ -451,10 +457,11 @@ async function unlockAllContracts() {
     loadingTablesMessage.value =
       "Your request to unlock your contracts has been processed successfully. Changes may take a few minutes to reflect";
     createCustomToast(loadingTablesMessage.value, ToastType.info);
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       loadContracts();
       loadingTablesMessage.value = undefined;
     }, 30000);
+    timeouts.push(timeoutId);
     unlockDialog.value = false;
   } catch (e) {
     loadingErrorMessage.value = `Failed to unlock contract your contracts`;
@@ -479,10 +486,11 @@ async function deleteAll() {
     loadingTablesMessage.value =
       "The contracts have been successfully deleted. Please note that all tables will be reloaded in 30 seconds.";
     createCustomToast(loadingTablesMessage.value, ToastType.info);
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       loadContracts();
       loadingTablesMessage.value = undefined;
     }, 30000);
+    timeouts.push(timeoutId);
   } catch (e) {
     if (e instanceof DeploymentKeyDeletionError) {
       createCustomToast("Failed to delete some keys, You don't have enough tokens", ToastType.danger);
@@ -551,10 +559,11 @@ async function onDeletedContracts(_contracts: NormalizedContract[]) {
   loadingTablesMessage.value =
     "The contracts have been successfully deleted. Please note that all tables will be reloaded in 30 seconds.";
   createCustomToast(loadingTablesMessage.value, ToastType.info);
-  setTimeout(() => {
+  const timeoutId = setTimeout(() => {
     loadContracts();
     loadingTablesMessage.value = undefined;
   }, 30000);
+  timeouts.push(timeoutId);
   contracts.value = [...rentContracts.value, ...nameContracts.value, ...nodeContracts.value];
 }
 async function getContractsLockDetails() {