From 42b4ceea77c03c74757c152c7a1209d38ca3b9d7 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Tue, 22 Nov 2022 00:40:47 +0100
Subject: [PATCH] Stop flicker when hovering instances (#477)

## Before


https://user-images.githubusercontent.com/52824/202865326-2d8f1c4c-8843-40c9-837d-fd678dbacdaa.mp4



## After



https://user-images.githubusercontent.com/52824/202865322-3ff488c8-eb36-4d4a-9c6f-591a84332ebc.mp4





## Before requesting a review

- [ ] if the PR is WIP - use draft mode
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
- [ ] what kind of review is needed?
  - [ ] conceptual
  - [ ] detailed
  - [ ] with testing

## Test cases

- [ ] step by step interaction description and what is expected to
happen

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
---
 .../shared/use-track-hovered-element.ts       | 23 +++++++++++--------
 .../breakpoints/breakpoints-editor.tsx        |  2 +-
 2 files changed, 15 insertions(+), 10 deletions(-)

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<HTMLElement>();
+
+  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";