refactor: don't show hover overlay during item drop

measuredco · Nov 22, 2024 · 858bfe7 · 858bfe7
1 parent c85d24e
commit 858bfe7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/packages/core/components/DragDropContext/index.tsx b/packages/core/components/DragDropContext/index.tsx
@@ -188,11 +188,13 @@ export const DragDropContext = ({ children }: { children: ReactNode }) => {
         <DragDropProvider
           manager={manager}
           onDragEnd={(event) => {
-            setDraggedItem(null);
-
             const { source, target } = event.operation;
 
-            if (!source) return;
+            if (!source) {
+              setDraggedItem(null);
+
+              return;
+            }
 
             const { zone, index } = source.data as ComponentDndData;
 
@@ -244,6 +246,10 @@ export const DragDropContext = ({ children }: { children: ReactNode }) => {
               dragListeners.dragend?.forEach((fn) => {
                 fn(event, manager);
               });
+
+              setTimeout(() => {
+                setDraggedItem(null);
+              }, 10);
             }, 250);
           }}
           onDragOver={(event, manager) => {

diff --git a/packages/core/components/DraggableComponent/index.tsx b/packages/core/components/DraggableComponent/index.tsx
@@ -365,17 +365,20 @@ export const DraggableComponent = ({
     setDragAxis(autoDragAxis);
   }, [ref, userDragAxis, autoDragAxis]);
 
-  useEffect(sync, [
-    ref,
-    overlayRef,
-    isVisible,
-    userIsDragging,
-    hover,
-    iframe,
-    state.data,
-  ]);
+  useEffect(sync, [ref, overlayRef, isVisible, hover, iframe, state.data]);
+
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    if (!userIsDragging) {
+      sync();
+      setReady(true);
+    } else {
+      setReady(false);
+    }
+  }, [userIsDragging]);
 
-  const overlayReady = ref.current && overlayRef.current;
+  const overlayReady = ref.current && overlayRef.current && ready;
 
   return (
     <DropZoneProvider