debounce color picker

src/components/fields/Color/PopoverCell.tsx

@@ -1,16 +1,23 @@
 import { IPopoverCellProps } from "../types";
 import { ColorPicker, toColor } from "react-color-palette";
+import { useDebouncedCallback } from "use-debounce";
 import "react-color-palette/lib/css/styles.css";
+import { useEffect, useState } from "react";
 
 export default function Color({ value, onSubmit }: IPopoverCellProps) {
-  const handleChangeComplete = (color: any) => onSubmit(color);
-
+  const [localValue, setLocalValue] = useState(value);
+  const [handleChangeComplete] = useDebouncedCallback((color) => {
+    onSubmit(color);
+  }, 400);
+  useEffect(() => {
+    handleChangeComplete(localValue);
+  }, [localValue]);
   return (
     <ColorPicker
       width={240}
       height={180}
-      color={value?.hex ? value : toColor("hex", "#fff")}
-      onChange={handleChangeComplete}
+      color={localValue?.hex ? localValue : toColor("hex", "#fff")}
+      onChange={setLocalValue}
       alpha
     />
   );