cursor=grabbing while dragging

apps/designer/app/designer/shared/tree/tree.tsx

@@ -7,12 +7,13 @@ import {
 import {
   type DropTarget,
   type Rect,
+  type Placement,
   useDrag,
   useDrop,
   useHold,
-  Box,
   useAutoScroll,
-  Placement,
+  useDragCursor,
+  Box,
 } from "@webstudio-is/design-system";
 import {
   findInstanceById,
@@ -358,6 +359,8 @@ export const Tree = ({
 
   const autoScrollHandlers = useAutoScroll();
 
+  useDragCursor(dragItem !== undefined);
+
   return (
     <Box
       css={{

packages/design-system/src/components/primitives/dnd/index.ts

@@ -3,4 +3,5 @@ export * from "./use-drop";
 export * from "./use-auto-scroll";
 export * from "./placement-indicator";
 export * from "./use-hold";
+export * from "./use-drag-cursor";
 export { type Rect, type Point, type Placement } from "./geometry-utils";

packages/design-system/src/components/primitives/dnd/use-drag-cursor.ts

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+
+export const useDragCursor = (isDragging: boolean, cursor = "grabbing") => {
+  useEffect(() => {
+    // possible
+    if (document.body === null) {
+      return;
+    }
+
+    if (isDragging) {
+      const originalValue = document.body.style.getPropertyValue("cursor");
+      const originalPriority =
+        document.body.style.getPropertyPriority("cursor");
+      document.body.style.setProperty("cursor", cursor, "important");
+      return () => {
+        document.body.style.setProperty(
+          "cursor",
+          originalValue,
+          originalPriority
+        );
+      };
+    }
+  }, [isDragging, cursor]);
+};