fix: Collapsed recalculate loop during load (#4178)

## 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:
5de6)
- [ ] 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/collapsed.ts

@@ -39,6 +39,22 @@ const isSelectorSupported = (selector: string) => {
   }
 };
 
+// This mark helps us detect if mutations were caused by the collapse algorithm
+const markCollapsedMutationProperty = `--ws-sys-collapsed-mutation`;
+
+/**
+ * Avoid infinite loop of mutations
+ */
+export const hasCollapsedMutationRecord = (
+  mutationRecords: MutationRecord[]
+) => {
+  return mutationRecords.some((record) =>
+    record.type === "attributes"
+      ? (record.oldValue?.includes(markCollapsedMutationProperty) ?? false)
+      : false
+  );
+};
+
 const getInstanceSize = (instanceId: string, tagName: HtmlTags | undefined) => {
   const metas = $registeredComponentMetas.get();
   const breakpoints = $breakpoints.get();
@@ -183,6 +199,12 @@ const recalculate = () => {
   // which resets the scroll position. To prevent this, we set the document's height to the current scrollHeight
   // to preserve the scroll position.
   const preserveHeight = document.documentElement.style.height;
+
+  // Mark that we are in the process of recalculating collapsed elements
+  document.documentElement.style.setProperty(
+    markCollapsedMutationProperty,
+    `true`
+  );
   document.documentElement.style.height = `${document.documentElement.scrollHeight}px`;
 
   // Now combine all operations in batches.
@@ -230,6 +252,7 @@ const recalculate = () => {
   }
 
   document.documentElement.style.height = preserveHeight;
+  document.documentElement.style.removeProperty(markCollapsedMutationProperty);
 };
 
 /**

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

@@ -25,7 +25,10 @@ import {
 import { subscribeScrollState } from "~/canvas/shared/scroll-state";
 import { $selectedInstanceOutline } from "~/shared/nano-states";
 import type { UnitSizes } from "~/builder/features/style-panel/shared/css-value-input/convert-units";
-import { setDataCollapsed } from "~/canvas/collapsed";
+import {
+  hasCollapsedMutationRecord,
+  setDataCollapsed,
+} from "~/canvas/collapsed";
 import { getBrowserStyle } from "./features/webstudio-component/get-browser-style";
 import type { InstanceSelector } from "~/shared/tree-utils";
 
@@ -238,37 +241,53 @@ const subscribeSelectedInstance = (
   };
 
   // Lightweight update
-  const updateOutline = () => {
+  const updateOutline: MutationCallback = (mutationRecords) => {
+    if (hasCollapsedMutationRecord(mutationRecords)) {
+      return;
+    }
+
     showOutline();
   };
 
   const resizeObserver = new ResizeObserver(update);
 
+  const mutationHandler: MutationCallback = (mutationRecords) => {
+    if (hasCollapsedMutationRecord(mutationRecords)) {
+      return;
+    }
+
+    update();
+  };
+
   // detect movement of the element within same parent
   // React prevent remount when key stays the same
   // `attributes: true` fixes issues with popups after trigger text editing
   // that cause radix to incorrectly set content in a wrong position at first render
-  const mutationObserver = new MutationObserver(update);
+  const mutationObserver = new MutationObserver(mutationHandler);
 
   const updateObservers = () => {
     for (const element of visibleElements) {
       resizeObserver.observe(element);
 
       const parent = element?.parentElement;
+
       if (parent) {
         mutationObserver.observe(parent, {
           childList: true,
           attributes: true,
+          attributeOldValue: true,
           attributeFilter: ["style", "class"],
         });
       }
     }
   };
 
   const bodyStyleMutationObserver = new MutationObserver(updateOutline);
+
   // previewStyle variables
   bodyStyleMutationObserver.observe(document.body, {
     attributes: true,
+    attributeOldValue: true,
     attributeFilter: ["style", "class"],
   });