fix: cancel debounce

ydb-platform · Oct 10, 2024 · 6ce9c94 · 6ce9c94
1 parent 9086ed1
commit 6ce9c94
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 16 deletions.
diff --git a/src/components/VDisk/VDisk.tsx b/src/components/VDisk/VDisk.tsx
@@ -46,18 +46,15 @@ export const VDisk = ({
 
     const anchor = React.useRef(null);
 
-    const handleShowPopup = () => {
+    const debouncedHandleShowPopup = debounce(() => {
         setIsPopupVisible(true);
         onShowPopup?.();
-    };
+    }, DEBOUNCE_TIMEOUT);
 
-    const handleHidePopup = () => {
+    const debouncedHandleHidePopup = debounce(() => {
         setIsPopupVisible(false);
         onHidePopup?.();
-    };
-
-    const debouncedHandleShowPopup = debounce(handleShowPopup, DEBOUNCE_TIMEOUT);
-    const debouncedHandleHidePopup = debounce(handleHidePopup, DEBOUNCE_TIMEOUT);
+    }, DEBOUNCE_TIMEOUT);
 
     let vDiskPath: string | undefined;
 
@@ -85,7 +82,10 @@ export const VDisk = ({
                 className={b()}
                 ref={anchor}
                 onMouseEnter={debouncedHandleShowPopup}
-                onMouseLeave={debouncedHandleHidePopup}
+                onMouseLeave={() => {
+                    debouncedHandleShowPopup.cancel();
+                    debouncedHandleHidePopup();
+                }}
             >
                 <InternalLink to={vDiskPath} className={b('content')}>
                     <DiskStateProgressBar

diff --git a/src/containers/Storage/PDisk/PDisk.tsx b/src/containers/Storage/PDisk/PDisk.tsx
@@ -51,18 +51,15 @@ export const PDisk = ({
     const {NodeId, PDiskId} = data;
     const pDiskIdsDefined = valueIsDefined(NodeId) && valueIsDefined(PDiskId);
 
-    const handleShowPopup = () => {
+    const debouncedHandleShowPopup = debounce(() => {
         setIsPopupVisible(true);
         onShowPopup?.();
-    };
+    }, DEBOUNCE_TIMEOUT);
 
-    const handleHidePopup = () => {
+    const debouncedHandleHidePopup = debounce(() => {
         setIsPopupVisible(false);
         onHidePopup?.();
-    };
-
-    const debouncedHandleShowPopup = debounce(handleShowPopup, DEBOUNCE_TIMEOUT);
-    const debouncedHandleHidePopup = debounce(handleHidePopup, DEBOUNCE_TIMEOUT);
+    }, DEBOUNCE_TIMEOUT);
 
     const renderVDisks = () => {
         if (!vDisks?.length) {
@@ -113,7 +110,10 @@ export const PDisk = ({
                     to={pDiskPath}
                     className={b('content')}
                     onMouseEnter={debouncedHandleShowPopup}
-                    onMouseLeave={debouncedHandleHidePopup}
+                    onMouseLeave={() => {
+                        debouncedHandleShowPopup.cancel();
+                        debouncedHandleHidePopup();
+                    }}
                 >
                     <DiskStateProgressBar
                         diskAllocatedPercent={data.AllocatedPercent}