From 080bef214bcaf7f1d6ca00da8384dad7f92af4e2 Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Tue, 1 Oct 2024 13:09:17 +0700
Subject: [PATCH] fix: hide system monitoring bar should stop spawning
 subprocess

---
 .../BottomPanel/SystemMonitor/index.tsx       | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx b/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
index a69e34d57..fb334082e 100644
--- a/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
+++ b/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useState } from 'react'
+import { Fragment, useCallback, useState } from 'react'
 
 import { Progress } from '@janhq/joi'
 import { useClickOutside } from '@janhq/joi'
@@ -51,24 +51,27 @@ const SystemMonitor = () => {
   const reduceTransparent = useAtomValue(reduceTransparentAtom)
 
   const { watch, stopWatching } = useGetSystemResources()
+
   useClickOutside(
     () => {
-      setShowSystemMonitorPanel(false)
+      toggleShowSystemMonitorPanel(false)
       setShowFullScreen(false)
     },
     null,
     [control, elementExpand]
   )
 
-  useEffect(() => {
-    // Watch for resource update
-    watch()
-
-    return () => {
-      stopWatching()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  const toggleShowSystemMonitorPanel = useCallback(
+    (isShow: boolean) => {
+      setShowSystemMonitorPanel(isShow)
+      if (isShow) {
+        watch()
+      } else {
+        stopWatching()
+      }
+    },
+    [setShowSystemMonitorPanel, stopWatching, watch]
+  )
 
   return (
     <Fragment>
@@ -79,7 +82,7 @@ const SystemMonitor = () => {
           showSystemMonitorPanel && 'bg-[hsla(var(--secondary-bg))]'
         )}
         onClick={() => {
-          setShowSystemMonitorPanel(!showSystemMonitorPanel)
+          toggleShowSystemMonitorPanel(!showSystemMonitorPanel)
           setShowFullScreen(false)
         }}
       >
@@ -123,7 +126,7 @@ const SystemMonitor = () => {
                 size={16}
                 className="text-[hsla(var(--text-secondary))]"
                 onClick={() => {
-                  setShowSystemMonitorPanel(false)
+                  toggleShowSystemMonitorPanel(false)
                   setShowFullScreen(false)
                 }}
               />