add throttle

apache · Apr 20, 2023 · 7129771 · 7129771
1 parent c79186e
commit 7129771
Showing 1 changed file with 32 additions and 15 deletions.
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/useResizeButton.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/useResizeButton.tsx
@@ -18,6 +18,9 @@
  */
 
 import React, { useCallback, useEffect, useState } from 'react';
+import throttle from 'lodash/throttle';
+
+const RESIZE_THROTTLE_MS = 50;
 
 export default function useResizeButton(
   minWidth: number,
@@ -62,25 +65,39 @@ export default function useResizeButton(
   }, [onMouseMove, isDragging]);
 
   const handleResize = useCallback(
-    (
-      dragStartX: number,
-      dragStartY: number,
-      dragStartWidth: number,
-      dragStartHeight: number,
-      clientX: number,
-      clientY: number,
-      minWidth: number,
-      minHeight: number,
-    ) => {
-      setWidth(Math.max(dragStartWidth + (clientX - dragStartX), minWidth));
-      setHeight(Math.max(dragStartHeight + (clientY - dragStartY), minHeight));
-    },
+    throttle(
+      ({
+        dragStartX,
+        dragStartY,
+        dragStartWidth,
+        dragStartHeight,
+        clientX,
+        clientY,
+        minWidth,
+        minHeight,
+      }: {
+        dragStartX: number;
+        dragStartY: number;
+        dragStartWidth: number;
+        dragStartHeight: number;
+        clientX: number;
+        clientY: number;
+        minWidth: number;
+        minHeight: number;
+      }): void => {
+        setWidth(Math.max(dragStartWidth + (clientX - dragStartX), minWidth));
+        setHeight(
+          Math.max(dragStartHeight + (clientY - dragStartY), minHeight),
+        );
+      },
+      RESIZE_THROTTLE_MS,
+    ),
     [setHeight, setWidth],
   );
 
   useEffect(() => {
     if (isDragging) {
-      handleResize(
+      handleResize({
         dragStartX,
         dragStartY,
         dragStartWidth,
@@ -89,7 +106,7 @@ export default function useResizeButton(
         clientY,
         minWidth,
         minHeight,
-      );
+      });
     }
   }, [
     isDragging,