fix: debounce

Author: karancs06

src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts

@@ -7,12 +7,17 @@ import { isValidCslp } from "../../cslp/cslpdata";
 import { setHighlightVariantFields } from "./useVariantsPostMessageEvent";
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types";
+import { debounce } from "lodash-es";
 
 const VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;
-// Debounce window after the last observed mutation before asking the visual
-// editor to re-send discussion highlights. Short enough to feel responsive;
-// long enough to coalesce a burst of mutations into a single request.
-const DISCUSSION_HIGHLIGHTS_DEBOUNCE_MS: Readonly<number> = 200;
+
+// Coalesce a burst of data-cslp mutations into a single request to the
+// visual editor.
+const requestDiscussionHighlights = debounce(() => {
+    visualBuilderPostMessage?.send(
+        VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS
+    );
+}, 200);
 
 type OnAudienceModeVariantPatchUpdate = {
     highlightVariantFields: boolean;
@@ -38,21 +43,6 @@ export function updateVariantClasses(): void {
     const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;
     const observers: MutationObserver[] = [];
 
-    // Ask the visual editor to re-send discussion highlights once the current
-    // burst of data-cslp mutations has settled. The VB owns the field-path list
-    // (it can be per-variant) so the iframe cannot re-mount comment icons on
-    // its own — it can only request a refresh.
-    let highlightsRequestTimer: ReturnType<typeof setTimeout> | null = null;
-    const requestDiscussionHighlights = () => {
-        if (highlightsRequestTimer !== null) clearTimeout(highlightsRequestTimer);
-        highlightsRequestTimer = setTimeout(() => {
-            highlightsRequestTimer = null;
-            visualBuilderPostMessage?.send(
-                VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS
-            );
-        }, DISCUSSION_HIGHLIGHTS_DEBOUNCE_MS);
-    };
-
     // Helper function to update element classes
     const updateElementClasses = (
         element: HTMLElement,

src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts

@@ -167,18 +167,12 @@ export function useVariantFieldsPostMessageEvent({ isSSR }: { isSSR: boolean }):
                 if (selectedVariant) {
                     addVariantFieldClass(selectedVariant);
                 }
-                // SSR DOM is already in its final state (no async re-render) —
-                // the MutationObserver in updateVariantClasses will never fire,
-                // so ask the visual editor to re-send discussion highlights now
-                // that the classes are applied against the final CSLP values.
+                // SSR DOM is final; observer never fires, request directly.
                 visualBuilderPostMessage?.send(
                     VisualBuilderPostMessageEvents.REQUEST_DISCUSSION_HIGHLIGHTS
                 );
             } else {
-                // For CSR apps the framework re-renders asynchronously after
-                // receiving the new variant, mutating data-cslp attributes.
-                // updateVariantClasses installs a MutationObserver that emits
-                // REQUEST_DISCUSSION_HIGHLIGHTS once those mutations settle.
+                // CSR: observer in updateVariantClasses requests on settle.
                 updateVariantClasses();
             }
         }

src/visualBuilder/generators/generateHighlightedComment.tsx

@@ -96,10 +96,7 @@ export function updateHighlightedCommentIconPosition() {
                     icon.style.top = `${top - highlighCommentOffset}px`; // Adjust based on the target element's top
                     icon.style.left = `${left - highlighCommentOffset}px`; // Adjust based on the target element's left
                 } else {
-                    // Target element is gone (e.g. data-cslp mutated after a
-                    // variant switch). Remove the orphaned icon instead of
-                    // silently leaving it drifted — the visual editor will
-                    // re-mount a fresh set via REQUEST_DISCUSSION_HIGHLIGHTS.
+                    // Target gone — drop the orphan icon.
                     icon.remove();
                 }
             }