debounce color selection

simularium · Nov 1, 2023 · 18bb022 · 18bb022
1 parent f615096
commit 18bb022
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -116,7 +116,8 @@
         "react-waypoint": "^9.0.3",
         "redux": "4.2.0",
         "redux-logic": "^3.0.3",
-        "reselect": "4.0.0"
+        "reselect": "4.0.0",
+        "use-debounce": "^9.0.4"
     },
     "resolutions": {
         "react": "^16",

diff --git a/src/components/ColorPicker/index.tsx b/src/components/ColorPicker/index.tsx
@@ -4,6 +4,7 @@ import { connect } from "react-redux";
 import { Popover, Tooltip } from "antd";
 import { HexColorInput, HexColorPicker } from "react-colorful";
 import classNames from "classnames";
+import { useDebounce } from "use-debounce";
 
 import selectionStateBranch from "../../state/selection";
 import { AGENT_COLORS } from "../../containers/ViewerPanel/constants";
@@ -37,19 +38,20 @@ const ColorPicker = ({
     setRecentColors,
 }: ColorPickerProps) => {
     const [color, setColor] = useState(initialColor);
+    const [debouncedColor] = useDebounce(color, 250);
 
     const handleColorChange = (color: string) => {
         const colorChanges: ColorChangesMap = {
             agents: { [agentName]: tags },
-            color: color,
+            color: debouncedColor,
         };
         setColorChanges(colorChanges);
-        updateRecentColors(color);
+        updateRecentColors(debouncedColor);
     };
 
     useEffect(() => {
-        handleColorChange(color);
-    }, [color]);
+        handleColorChange(debouncedColor);
+    }, [debouncedColor]);
 
     const updateRecentColors = (color: string) => {
         if (recentColors.includes(color)) {