Delay drag padding rendering

To fix chrome drag preview bug
uptick · Aug 25, 2021 · 3cc4565 · 3cc4565
1 parent 8c88539
commit 3cc4565
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/react-editor/src/components/draggable.jsx b/react-editor/src/components/draggable.jsx
@@ -26,6 +26,20 @@ function useMouseCoords() {
   return getCoords
 }
 
+function useDragDelay(currentDelay) {
+  const [delayed, setDelayed] = useState(currentDelay)
+  useEffect(() => {
+    const update = () => {
+      setDelayed(currentDelay)
+    }
+    const timed = window.setTimeout(update, 500)
+    return () => {
+      window.clearTimeout(timed)
+    }
+  }, [currentDelay])
+  return delayed
+}
+
 function Draggable(props) {
   const getCoords = useMouseCoords()
   const draggableRef = useRef()
@@ -124,6 +138,7 @@ function Draggable(props) {
     }),
   })
   const deletable = typeof props.onDelete === 'function'
+  const delayedDragHappening = useDragDelay(isDragHappening)
   return (
     <>
       <div
@@ -143,7 +158,7 @@ function Draggable(props) {
             paddingBottom: isAfterActive ? activeHeight : 0,
           }}
         >
-          {!isBeingDragged && isDragHappening && (
+          {!isBeingDragged && delayedDragHappening && (
             <div
               className="drop-adjacent before"
               ref={beforeDrop}
@@ -156,7 +171,7 @@ function Draggable(props) {
               }}
             />
           )}
-          {!isBeingDragged && isDragHappening && (
+          {!isBeingDragged && delayedDragHappening && (
             <div
               className="drop-adjacent after"
               ref={afterDrop}