fix: Speedup resize, part 1 (#4543)

## Description

Removes rerender of the whole builder during resize.

Still some debounced resize of style panel etc exists. But will
investigate in following PR

## 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/builder/builder.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { useStore } from "@nanostores/react";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { usePublish, $publisher } from "~/shared/pubsub";
@@ -20,7 +20,6 @@ import { Footer } from "./features/footer";
 import {
   CanvasIframe,
   CanvasToolsContainer,
-  useReadCanvasRect,
   Workspace,
 } from "./features/workspace";
 import {
@@ -300,19 +299,20 @@ export const Builder = ({
   const isDesignMode = useStore($isDesignMode);
   const isContentMode = useStore($isContentMode);
 
-  const { onRef: onRefReadCanvas, onTransitionEnd } = useReadCanvasRect();
-
   useSetWindowTitle();
 
-  const iframeRefCallback = mergeRefs((element: HTMLIFrameElement | null) => {
-    if (element?.contentWindow) {
-      // added to iframe window and stored in local variable right away to prevent
-      // overriding in emebedded scripts on canvas
-      element.contentWindow.__webstudioSharedSyncEmitter__ =
-        builderClient.emitter;
-    }
-    onRefReadCanvas(element);
-  }, publishRef);
+  const iframeRefCallback = useMemo(
+    () =>
+      mergeRefs((element: HTMLIFrameElement | null) => {
+        if (element?.contentWindow) {
+          // added to iframe window and stored in local variable right away to prevent
+          // overriding in emebedded scripts on canvas
+          element.contentWindow.__webstudioSharedSyncEmitter__ =
+            builderClient.emitter;
+        }
+      }, publishRef),
+    [publishRef]
+  );
 
   const { navigatorLayout } = useStore($settings);
   const dataLoadingState = useStore($dataLoadingState);
@@ -369,7 +369,7 @@ export const Builder = ({
         >
           <ProjectSettings />
           <Main>
-            <Workspace onTransitionEnd={onTransitionEnd}>
+            <Workspace>
               {dataLoadingState === "loaded" && (
                 <CanvasIframe
                   ref={iframeRefCallback}

apps/builder/app/builder/features/workspace/canvas-iframe.tsx

@@ -1,10 +1,18 @@
-import { forwardRef } from "react";
+import { forwardRef, useMemo, useRef, type RefObject } from "react";
 import {
   css,
   canvasPointerEventsPropertyName,
 } from "@webstudio-is/design-system";
 import { useUnmount } from "~/shared/hook-utils/use-mount";
 import { $canvasIframeState } from "~/shared/nano-states";
+import { useCallback, useEffect, useState } from "react";
+import {
+  $scale,
+  $canvasWidth,
+  $canvasRect,
+} from "~/builder/shared/nano-states";
+import { useWindowResizeDebounced } from "~/shared/dom-hooks";
+import { mergeRefs } from "@react-aria/utils";
 
 const iframeStyle = css({
   border: "none",
@@ -16,20 +24,72 @@ const iframeStyle = css({
 
 type CanvasIframeProps = JSX.IntrinsicElements["iframe"];
 
+const CanvasRectUpdater = ({
+  iframeRef,
+}: {
+  iframeRef: RefObject<HTMLIFrameElement>;
+}) => {
+  const [updateCallback, setUpdateCallback] = useState<
+    undefined | (() => void)
+  >(undefined);
+
+  useEffect(() => {
+    updateCallback?.();
+  }, [updateCallback]);
+
+  const updateRect = useCallback(() => {
+    // create new function to trigger effect
+    const task = () => {
+      if (iframeRef.current === null) {
+        return;
+      }
+
+      const rect = iframeRef.current.getBoundingClientRect();
+      $canvasRect.set(rect);
+    };
+
+    setUpdateCallback(() => task);
+  }, [iframeRef]);
+
+  useEffect(() => {
+    updateRect();
+    const $scaleUnsubscribe = $scale.listen(updateRect);
+    const $canvasWidthUnsubscribe = $canvasWidth.listen(updateRect);
+
+    return () => {
+      $scaleUnsubscribe();
+      $canvasWidthUnsubscribe();
+    };
+  }, [updateRect]);
+
+  useWindowResizeDebounced(() => {
+    updateRect();
+  });
+
+  return null;
+};
+
 export const CanvasIframe = forwardRef<HTMLIFrameElement, CanvasIframeProps>(
   (props, ref) => {
+    const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+    const merrgedRef = useMemo(() => mergeRefs(ref, iframeRef), [ref]);
+
     useUnmount(() => {
       // Unmount does't work inside iframe.
       $canvasIframeState.set("idle");
     });
 
     return (
-      <iframe
-        {...props}
-        ref={ref}
-        className={iframeStyle()}
-        credentialless="true"
-      />
+      <>
+        <iframe
+          {...props}
+          ref={merrgedRef}
+          className={iframeStyle()}
+          credentialless="true"
+        />
+        <CanvasRectUpdater iframeRef={iframeRef} />
+      </>
     );
   }
 );

apps/builder/app/builder/features/workspace/index.ts

@@ -1,3 +1,2 @@
 export * from "./workspace";
-export * from "./use-read-canvas-rect";
 export * from "./canvas-iframe";

apps/builder/app/builder/features/workspace/use-read-canvas-rect.ts

@@ -92,10 +92,9 @@ const useOutlineStyle = () => {
 
 type WorkspaceProps = {
   children: ReactNode;
-  onTransitionEnd: () => void;
 };
 
-export const Workspace = ({ children, onTransitionEnd }: WorkspaceProps) => {
+export const Workspace = ({ children }: WorkspaceProps) => {
   const canvasStyle = useCanvasStyle();
   const workspaceRef = useMeasureWorkspace();
   useSetCanvasWidth();
@@ -112,11 +111,7 @@ export const Workspace = ({ children, onTransitionEnd }: WorkspaceProps) => {
         onClick={handleWorkspaceClick}
         ref={workspaceRef}
       >
-        <div
-          className={canvasContainerStyle()}
-          style={canvasStyle}
-          onTransitionEnd={onTransitionEnd}
-        >
+        <div className={canvasContainerStyle()} style={canvasStyle}>
           {children}
         </div>
         <div