diff --git a/apps/designer/app/canvas/shared/use-track-hovered-element.ts b/apps/designer/app/canvas/shared/use-track-hovered-element.ts index 1d9c2c785a..3f644ffd2c 100644 --- a/apps/designer/app/canvas/shared/use-track-hovered-element.ts +++ b/apps/designer/app/canvas/shared/use-track-hovered-element.ts @@ -1,6 +1,7 @@ -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { useSelectedElement } from "./nano-states"; import { useRootInstance } from "~/shared/nano-states"; +import { useDebounce } from "react-use"; const eventOptions = { passive: true, @@ -11,23 +12,27 @@ export const useTrackHoveredElement = ( ) => { const [rootInstance] = useRootInstance(); const [selectedElement] = useSelectedElement(); + const [hoveredElement, setHoveredElement] = useState(); + + useDebounce( + () => { + onChange(hoveredElement); + }, + 50, + [hoveredElement] + ); useEffect(() => { const handleMouseOver = (event: MouseEvent) => { const element = event.target; - if ( - rootInstance === undefined || - !(element instanceof HTMLElement) || - element.dataset.outlineDisabled - ) { + if (rootInstance === undefined || !(element instanceof HTMLElement)) { return; } - onChange(element); + setHoveredElement(element); }; const handleMouseOut = () => { - if (rootInstance === undefined) return; - onChange(undefined); + setHoveredElement(undefined); }; window.addEventListener("mouseover", handleMouseOver, eventOptions); diff --git a/apps/designer/app/designer/features/breakpoints/breakpoints-editor.tsx b/apps/designer/app/designer/features/breakpoints/breakpoints-editor.tsx index 2652c0e840..3c80b4536d 100644 --- a/apps/designer/app/designer/features/breakpoints/breakpoints-editor.tsx +++ b/apps/designer/app/designer/features/breakpoints/breakpoints-editor.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import useDebounce from "react-use/lib/useDebounce"; +import { useDebounce } from "react-use"; import { type Breakpoint } from "@webstudio-is/css-data"; import { type Publish } from "~/shared/pubsub"; import { Button, TextField, Flex, Text } from "@webstudio-is/design-system";