fix: stop connection resource work on unmount

src/renderer/src/pages/connections.tsx

@@ -112,6 +112,29 @@ const Connections: React.FC = () => {
   const appNameRequestQueue = useRef(new Set<string>())
   const processingAppNames = useRef(new Set<string>())
   const processAppNameTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const otherPathsTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const mountedRef = useRef(false)
+
+  useEffect(() => {
+    const iconQueue = iconRequestQueue.current
+    const activeIcons = processingIcons.current
+    const appNameQueue = appNameRequestQueue.current
+    const activeAppNames = processingAppNames.current
+
+    mountedRef.current = true
+    return (): void => {
+      mountedRef.current = false
+      if (processIconTimer.current) clearTimeout(processIconTimer.current)
+      if (processIconIdleCallback.current) cancelIdleCallback(processIconIdleCallback.current)
+      if (processAppNameTimer.current) clearTimeout(processAppNameTimer.current)
+      if (otherPathsTimer.current) clearTimeout(otherPathsTimer.current)
+      iconQueue.clear()
+      activeIcons.clear()
+      appNameQueue.clear()
+      activeAppNames.clear()
+    }
+  }, [])
+
   useEffect(() => {
     activeConnectionsRef.current = activeConnections
     allConnectionsRef.current = allConnections
@@ -239,7 +262,12 @@ const Connections: React.FC = () => {
   }
 
   const processAppNameQueue = useCallback(async () => {
-    if (processingAppNames.current.size >= 3 || appNameRequestQueue.current.size === 0) return
+    if (
+      !mountedRef.current ||
+      processingAppNames.current.size >= 3 ||
+      appNameRequestQueue.current.size === 0
+    )
+      return
 
     const pathsToProcess = Array.from(appNameRequestQueue.current).slice(0, 3)
     pathsToProcess.forEach((path) => appNameRequestQueue.current.delete(path))
@@ -250,7 +278,7 @@ const Connections: React.FC = () => {
 
       try {
         const appName = await getAppName(path)
-        if (appName) {
+        if (appName && mountedRef.current) {
           setAppNameCache((prev) => putCappedRecord(prev, path, appName, MAX_APP_NAME_CACHE_SIZE))
         }
       } catch {
@@ -262,13 +290,18 @@ const Connections: React.FC = () => {
 
     await Promise.all(promises)
 
-    if (appNameRequestQueue.current.size > 0) {
+    if (mountedRef.current && appNameRequestQueue.current.size > 0) {
       processAppNameTimer.current = setTimeout(processAppNameQueue, 100)
     }
   }, [])
 
   const processIconQueue = useCallback(async () => {
-    if (processingIcons.current.size >= 5 || iconRequestQueue.current.size === 0) return
+    if (
+      !mountedRef.current ||
+      processingIcons.current.size >= 5 ||
+      iconRequestQueue.current.size === 0
+    )
+      return
 
     const pathsToProcess = Array.from(iconRequestQueue.current).slice(0, 5)
     pathsToProcess.forEach((path) => iconRequestQueue.current.delete(path))
@@ -290,6 +323,8 @@ const Connections: React.FC = () => {
           processedDataURL = await cropAndPadTransparent(fullDataURL)
         }
 
+        if (!mountedRef.current) return
+
         saveIconToCache(path, processedDataURL)
 
         setIconMap((prev) => putCappedRecord(prev, path, processedDataURL, MAX_ICON_CACHE_SIZE))
@@ -307,7 +342,7 @@ const Connections: React.FC = () => {
 
     await Promise.all(promises)
 
-    if (iconRequestQueue.current.size > 0) {
+    if (mountedRef.current && iconRequestQueue.current.size > 0) {
       if ('requestIdleCallback' in window) {
         processIconIdleCallback.current = requestIdleCallback(() => processIconQueue(), {
           timeout: 1000
@@ -372,13 +407,17 @@ const Connections: React.FC = () => {
 
     if (otherPaths.size > 0) {
       const loadOtherPaths = () => {
+        if (!mountedRef.current) return
         otherPaths.forEach((path) => {
           loadIcon(path, false)
           if (displayAppName) loadAppName(path)
         })
       }
 
-      setTimeout(loadOtherPaths, 100)
+      otherPathsTimer.current = setTimeout(() => {
+        otherPathsTimer.current = null
+        loadOtherPaths()
+      }, 100)
     }
 
     if (processIconTimer.current) clearTimeout(processIconTimer.current)
@@ -394,6 +433,7 @@ const Connections: React.FC = () => {
       if (processIconTimer.current) clearTimeout(processIconTimer.current)
       if (processIconIdleCallback.current) cancelIdleCallback(processIconIdleCallback.current)
       if (processAppNameTimer.current) clearTimeout(processAppNameTimer.current)
+      if (otherPathsTimer.current) clearTimeout(otherPathsTimer.current)
     }
   }, [
     activeConnections,