chore: hide cursor when no mouse activity

apps/tessellator/src/components/dom/controls/mouseActivityContext.tsx

@@ -29,13 +29,37 @@ export const MouseActivityProvider: FC<MouseActivityProviderProps> = ({
 
   const mouseTimeout: MutableRefObject<NodeJS.Timeout | null> = useRef(null);
 
-  const mouseMoveHandler = () => {
+  function handleCursorStyle(visible: boolean) {
+    const el = document.body;
+    if (!el) {
+      return;
+    }
+    if (
+      visible &&
+      (el.style.cursor === "pointer" || el.style.cursor === "auto")
+    ) {
+      return;
+    }
+    el.style.cursor = visible ? "auto" : "none";
+  }
+
+  function handleMouseActive() {
     setMouseActive(true);
+    handleCursorStyle(true);
+  }
+
+  function handleMouseInactive() {
+    setMouseActive(false);
+    handleCursorStyle(false);
+  }
+
+  const mouseMoveHandler = () => {
+    handleMouseActive();
 
     if (mouseTimeout.current) {
       clearTimeout(mouseTimeout.current);
     }
-    mouseTimeout.current = setTimeout(() => setMouseActive(false), 3500);
+    mouseTimeout.current = setTimeout(() => handleMouseInactive(), 3500);
   };
 
   useEffect(() => {