fix: Reduce amount of draw on resize (#4544)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

apps/builder/app/canvas/instance-selected.ts

@@ -30,6 +30,7 @@ import {
 } from "~/canvas/collapsed";
 import { getBrowserStyle } from "./features/webstudio-component/get-browser-style";
 import type { InstanceSelector } from "~/shared/tree-utils";
+import { shallowEqual } from "shallow-equal";
 
 const isHtmlTag = (tag: string): tag is HtmlTags =>
   htmlTags.includes(tag as HtmlTags);
@@ -205,7 +206,14 @@ const subscribeSelectedInstance = (
       selectedInstanceSelector
     );
 
-    $selectedInstanceIntanceToTag.set(instanceToTag);
+    if (
+      !shallowEqual(
+        [...($selectedInstanceIntanceToTag.get()?.entries() ?? [])].flat(),
+        [...(instanceToTag?.entries() ?? [])].flat()
+      )
+    ) {
+      $selectedInstanceIntanceToTag.set(instanceToTag);
+    }
 
     const unitSizes = calculateUnitSizes(element);
     $selectedInstanceUnitSizes.set(unitSizes);
@@ -229,7 +237,12 @@ const subscribeSelectedInstance = (
         activeStates.add(state);
       }
     }
-    $selectedInstanceStates.set(activeStates);
+
+    if (
+      !shallowEqual(activeStates.keys(), $selectedInstanceStates.get().keys())
+    ) {
+      $selectedInstanceStates.set(activeStates);
+    }
   };
 
   let updateStoreTimeouHandle: undefined | ReturnType<typeof setTimeout>;

apps/builder/app/shared/debug-track.ts

@@ -0,0 +1,36 @@
+import { shallowEqual } from "shallow-equal";
+import warnOnce from "warn-once";
+
+const trackers: Record<string, (args: Record<string, unknown>) => void> = {};
+
+/**
+ * Debug-only: Tracks changes between consecutive calls.
+ * Usage: `track('label')({ a, b, c })` logs changed keys on subsequent calls.
+ */
+export const trackChanges = (label: string) => {
+  if (process.env.NODE_ENV !== "development") {
+    warnOnce(true, "track should not be used in production");
+    return () => {};
+  }
+
+  if (!trackers[label]) {
+    let previousArgs: Record<string, unknown> | undefined;
+
+    trackers[label] = (currentArgs: Record<string, unknown>) => {
+      if (!previousArgs) {
+        previousArgs = currentArgs;
+        return;
+      }
+
+      if (!shallowEqual(previousArgs, currentArgs)) {
+        const changedKeys = Object.keys(currentArgs).filter(
+          (key) => previousArgs![key] !== currentArgs[key]
+        );
+        console.info(label, changedKeys);
+        previousArgs = currentArgs;
+      }
+    };
+  }
+
+  return trackers[label];
+};