@gemx-dev/heatmap-react 3.5.92-dev.24 → 3.5.92-dev.26

package/dist/esm/hooks/viz-canvas/useAreaClickmap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAreaClickmap.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-canvas/useAreaClickmap.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe;;CAe3B,CAAC"}
+{"version":3,"file":"useAreaClickmap.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-canvas/useAreaClickmap.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe;;CAmB3B,CAAC"}

package/dist/esm/hooks/viz-canvas/useClickmap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useClickmap.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-canvas/useClickmap.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW;;CAiBvB,CAAC"}
+{"version":3,"file":"useClickmap.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-canvas/useClickmap.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW;;CAmBvB,CAAC"}

package/dist/esm/hooks/viz-render/useHeatmapIframeProcessor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHeatmapIframeProcessor.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapIframeProcessor.ts"],"names":[],"mappings":"AAgCA,MAAM,WAAW,6BAA6B;IAC5C,GAAG,EAAE,CAAC,MAAM,EAAE,iBAAiB,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7E,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,QAAO,6BAuE5C,CAAC"}
+{"version":3,"file":"useHeatmapIframeProcessor.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-render/useHeatmapIframeProcessor.ts"],"names":[],"mappings":"AAgCA,MAAM,WAAW,6BAA6B;IAC5C,GAAG,EAAE,CAAC,MAAM,EAAE,iBAAiB,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7E,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,QAAO,6BAyE5C,CAAC"}

package/dist/esm/index.js

@@ -3492,16 +3492,21 @@ const useAreaTopAutoDetect = (props) => {
 const useAreaClickmap = () => {
     const vizRef = useHeatmapVizRectContext((s) => s.vizRef);
     const clickmap = useHeatmapDataContext((s) => s.clickmap);
+    const isDomLoaded = useHeatmapVizContext((s) => s.isDomLoaded);
     const start = useCallback(() => {
-        if (!vizRef || !clickmap || clickmap.length === 0)
+        if (!vizRef || !clickmap || !isDomLoaded)
             return;
         try {
             vizRef?.clearmap?.();
+            if (clickmap.length === 0)
+                return;
+            // implement area clickmap
+            // requestIdleCallback(() => vizRef?.areaClickmap?.(clickmap), { timeout: 300 });
         }
         catch (error) {
-            console.error(`🚀 🐥 ~ useAreaClickmap ~ error:`, error);
+            console.error(`useAreaClickmap ~ error:`, error);
         }
-    }, [vizRef, clickmap]);
+    }, [vizRef, clickmap, isDomLoaded]);
     return { start };
 };
 
@@ -3510,14 +3515,16 @@ const useClickmap = () => {
     const clickmap = useHeatmapDataContext((s) => s.clickmap);
     const isDomLoaded = useHeatmapVizContext((s) => s.isDomLoaded);
     const start = useCallback(() => {
-        if (!vizRef || !clickmap || clickmap.length === 0 || !isDomLoaded)
+        if (!vizRef || !clickmap || !isDomLoaded)
             return;
         try {
             vizRef?.clearmap?.();
+            if (clickmap.length === 0)
+                return;
             requestIdleCallback(() => vizRef?.clickmap?.(clickmap), { timeout: 300 });
         }
         catch (error) {
-            console.error(`🚀 🐥 ~ useClickmap ~ error:`, error);
+            console.error(`useClickmap ~ error:`, error);
         }
     }, [vizRef, clickmap, isDomLoaded]);
     return { start };
@@ -4224,6 +4231,28 @@ function createPerfTimer(config) {
     };
 }
 
+/**
+ * Default iframe dimension calculation.
+ * Used as fallback when no fix overrides getDimensions().
+ */
+function getFinalHeight(doc, onlyClientHeight = true) {
+    void doc.body.offsetHeight; // trigger reflow
+    // const bodyMinHeight = parseFloat(win.getComputedStyle(doc.body).minHeight) || 0;
+    // const htmlMinHeight = parseFloat(win.getComputedStyle(doc.documentElement).minHeight) || 0;
+    if (onlyClientHeight) {
+        return Math.max(doc.body?.clientHeight || 0, doc.documentElement?.clientHeight || 0);
+    }
+    return Math.max(doc.body?.scrollHeight || 0, doc.body?.offsetHeight || 0, doc.documentElement?.scrollHeight || 0, doc.documentElement?.offsetHeight || 0, doc.documentElement?.clientHeight || 0);
+}
+function getFinalWidth(doc) {
+    return Math.max(
+    // doc.body?.scrollWidth || 0,
+    // doc.body?.offsetWidth || 0,
+    // doc.documentElement?.scrollWidth || 0,
+    // doc.documentElement?.offsetWidth || 0,
+    doc.documentElement?.clientWidth || 0);
+}
+
 /**
  * DOM observation setup — ResizeObserver + MutationObserver.
  * Returns a cleanup function that disconnects both observers.
@@ -4248,36 +4277,74 @@ function setup(doc, onChange) {
     };
 }
 
+// cspell:ignore cooldown
 /**
  * Height Observer Processor
  * Background observer — watches for iframe content height changes.
  */
-// ── Module-level functions ────────────────────────────────────────────────────
-function clearTimers(s) {
-    if (s.throttleTimeout) {
-        clearTimeout(s.throttleTimeout);
-        s.throttleTimeout = null;
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function readCurrentHeight(s) {
+    if (!s.iframe?.contentDocument || !s.iframe?.contentWindow)
+        return 0;
+    const height = getFinalHeight(s.iframe.contentDocument, s.iframe.contentWindow);
+    s.logger.log('Height:', height);
+    return height;
+}
+function isBlocked(s) {
+    return s.isProcessing || s.isCoolingDown || s.throttleTimeout !== null;
+}
+function hasHeightChanged(s, height) {
+    return height !== s.lastHeight;
+}
+// ── Cooldown ──────────────────────────────────────────────────────────────────
+function startCooldown(s) {
+    s.isCoolingDown = true;
+    s.cooldownTimeout = setTimeout(() => {
+        s.cooldownTimeout = null;
+        s.isCoolingDown = false;
+    }, s.cooldownMs);
+}
+function stopCooldown(s) {
+    if (s.cooldownTimeout) {
+        clearTimeout(s.cooldownTimeout);
+        s.cooldownTimeout = null;
     }
+    s.isCoolingDown = false;
+}
+// ── Debounce ──────────────────────────────────────────────────────────────────
+function cancelPendingDebounce(s) {
     if (s.debounceTimeout) {
         clearTimeout(s.debounceTimeout);
         s.debounceTimeout = null;
     }
 }
-function getActualHeight(s) {
-    if (!s.iframe?.contentDocument)
-        return 0;
-    const { documentElement: docEl, body } = s.iframe.contentDocument;
-    const heights = [docEl.scrollHeight, docEl.offsetHeight, body.scrollHeight, body.offsetHeight];
-    const maxHeight = Math.max(...heights.filter((h) => h > 0));
-    s.logger.log('Height sources:', {
-        'documentElement.scrollHeight': docEl.scrollHeight,
-        'documentElement.offsetHeight': docEl.offsetHeight,
-        'body.scrollHeight': body.scrollHeight,
-        'body.offsetHeight': body.offsetHeight,
-        maxHeight,
-    });
-    return maxHeight;
+function processCurrentHeightIfChanged(s) {
+    const height = readCurrentHeight(s);
+    if (hasHeightChanged(s, height)) {
+        processHeightChange(s, height);
+    }
 }
+function scheduleDebounce(s) {
+    cancelPendingDebounce(s);
+    s.debounceTimeout = setTimeout(() => {
+        s.debounceTimeout = null;
+        processCurrentHeightIfChanged(s);
+    }, s.debounceMs);
+}
+// ── Throttle ──────────────────────────────────────────────────────────────────
+function scheduleThrottledCheck(s) {
+    s.throttleTimeout = setTimeout(() => {
+        s.throttleTimeout = null;
+        const height = readCurrentHeight(s);
+        if (!hasHeightChanged(s, height)) {
+            cancelPendingDebounce(s);
+            return;
+        }
+        s.logger.log(`Height changed: ${s.lastHeight}px -> ${height}px`);
+        scheduleDebounce(s);
+    }, s.throttleMs);
+}
+// ── Core ──────────────────────────────────────────────────────────────────────
 async function processHeightChange(s, newHeight) {
     if (!s.iframe || !s.config)
         return;
@@ -4289,7 +4356,6 @@ async function processHeightChange(s, newHeight) {
             width: s.iframe.contentWindow?.innerWidth ?? 0,
         };
         s.lastHeight = newHeight;
-        s.logger.log('Height change processed:', result);
         s.config.onHeightChange?.(result);
         window.dispatchEvent(new CustomEvent('iframe-dimensions-applied', { detail: result }));
     }
@@ -4299,46 +4365,59 @@ async function processHeightChange(s, newHeight) {
     }
     finally {
         s.isProcessing = false;
+        if (s.cooldownMs > 0)
+            startCooldown(s);
     }
 }
 function handleHeightChange(s) {
-    if (s.isProcessing || s.throttleTimeout)
+    if (isBlocked(s))
         return;
-    s.throttleTimeout = setTimeout(() => {
-        s.throttleTimeout = null;
-        const currentHeight = getActualHeight(s);
-        if (currentHeight === s.lastHeight) {
-            // Height returned to known state — cancel any stale pending debounce
-            // to prevent it from firing with an outdated height and corrupting lastHeight.
-            if (s.debounceTimeout) {
-                clearTimeout(s.debounceTimeout);
-                s.debounceTimeout = null;
-            }
-            return;
-        }
-        s.logger.log(`Height changed: ${s.lastHeight}px -> ${currentHeight}px`);
-        if (s.debounceTimeout)
-            clearTimeout(s.debounceTimeout);
-        s.debounceTimeout = setTimeout(() => {
-            s.debounceTimeout = null;
-            // Re-read height at dispatch time to avoid using a stale closure value.
-            const finalHeight = getActualHeight(s);
-            if (finalHeight !== s.lastHeight) {
-                processHeightChange(s, finalHeight);
-            }
-        }, s.debounceMs);
-    }, s.throttleMs);
+    scheduleThrottledCheck(s);
 }
-function observe(s) {
+function attachObserver(s) {
     if (!s.iframe?.contentDocument?.body) {
         s.logger.warn('Cannot observe height changes: iframe body not found');
         return;
     }
     s.observerCleanup?.();
-    s.lastHeight = getActualHeight(s);
+    s.lastHeight = readCurrentHeight(s);
     s.logger.log('Initial height:', s.lastHeight);
     s.observerCleanup = setup(s.iframe.contentDocument, () => handleHeightChange(s));
 }
+function detachObserver(s) {
+    s.observerCleanup?.();
+    s.observerCleanup = null;
+}
+function clearAllTimers(s) {
+    if (s.throttleTimeout) {
+        clearTimeout(s.throttleTimeout);
+        s.throttleTimeout = null;
+    }
+    if (s.debounceTimeout) {
+        clearTimeout(s.debounceTimeout);
+        s.debounceTimeout = null;
+    }
+    if (s.startDelayTimeout) {
+        clearTimeout(s.startDelayTimeout);
+        s.startDelayTimeout = null;
+    }
+    stopCooldown(s);
+}
+// ── Lifecycle ─────────────────────────────────────────────────────────────────
+function observeImmediately(s) {
+    attachObserver(s);
+    s.logger.log('Height observer started');
+}
+function observeAfterDelay(s, delayMs) {
+    s.logger.log(`Height observer will start in ${delayMs}ms`);
+    s.startDelayTimeout = setTimeout(() => {
+        s.startDelayTimeout = null;
+        if (!s.running)
+            return;
+        attachObserver(s);
+        s.logger.log('Height observer started (after delay)');
+    }, delayMs);
+}
 function start$5(s, iframe, cfg) {
     if (s.running) {
         s.logger.warn('Observer is already running. Call stop() first.');
@@ -4348,27 +4427,32 @@ function start$5(s, iframe, cfg) {
     s.config = cfg;
     s.throttleMs = cfg.throttleMs ?? 25;
     s.debounceMs = cfg.debounceMs ?? 500;
+    s.cooldownMs = cfg.cooldownMs ?? 0;
     s.running = true;
-    observe(s);
-    s.logger.log('Height observer started');
+    const startDelayMs = cfg.startDelayMs ?? 0;
+    if (startDelayMs > 0) {
+        observeAfterDelay(s, startDelayMs);
+    }
+    else {
+        observeImmediately(s);
+    }
 }
 function stop$5(s) {
     if (!s.running)
         return;
-    s.observerCleanup?.();
-    s.observerCleanup = null;
-    clearTimers(s);
+    detachObserver(s);
+    clearAllTimers(s);
     s.iframe = null;
     s.config = null;
     s.lastHeight = 0;
     s.isProcessing = false;
+    s.isCoolingDown = false;
     s.running = false;
     s.logger.log('Height observer stopped');
 }
 function clear(s) {
-    s.observerCleanup?.();
-    s.observerCleanup = null;
-    clearTimers(s);
+    detachObserver(s);
+    clearAllTimers(s);
     s.lastHeight = 0;
     s.isProcessing = false;
 }
@@ -4382,6 +4466,8 @@ function updateConfig$3(s, cfg) {
         s.throttleMs = cfg.throttleMs;
     if (cfg.debounceMs !== undefined)
         s.debounceMs = cfg.debounceMs;
+    if (cfg.cooldownMs !== undefined)
+        s.cooldownMs = cfg.cooldownMs;
     s.logger.configure({ enabled: !!s.config.debug });
     s.logger.log('Config updated');
 }
@@ -4395,15 +4481,19 @@ function createHeightObserver() {
         lastHeight: 0,
         throttleTimeout: null,
         debounceTimeout: null,
+        startDelayTimeout: null,
+        cooldownTimeout: null,
         isProcessing: false,
+        isCoolingDown: false,
         throttleMs: 25,
         debounceMs: 500,
+        cooldownMs: 0,
         running: false,
     };
     return {
         start: (iframe, cfg) => start$5(s, iframe, cfg),
         stop: () => stop$5(s),
-        observe: () => observe(s),
+        observe: () => attachObserver(s),
         clear: () => clear(s),
         updateConfig: (cfg) => updateConfig$3(s, cfg),
         getCurrentHeight: () => s.lastHeight,
@@ -5150,20 +5240,6 @@ register$1({
     afterProcess,
 });
 
-/**
- * Default iframe dimension calculation.
- * Used as fallback when no fix overrides getDimensions().
- */
-function getFinalHeight(doc, win) {
-    void doc.body.offsetHeight; // trigger reflow
-    const bodyMinHeight = parseFloat(win.getComputedStyle(doc.body).minHeight) || 0;
-    const htmlMinHeight = parseFloat(win.getComputedStyle(doc.documentElement).minHeight) || 0;
-    return Math.max(doc.body?.scrollHeight || 0, doc.body?.offsetHeight || 0, doc.documentElement?.scrollHeight || 0, doc.documentElement?.offsetHeight || 0, doc.documentElement?.clientHeight || 0, bodyMinHeight, htmlMinHeight);
-}
-function getFinalWidth(doc) {
-    return Math.max(doc.body?.scrollWidth || 0, doc.body?.offsetWidth || 0, doc.documentElement?.scrollWidth || 0, doc.documentElement?.offsetWidth || 0, doc.documentElement?.clientWidth || 0);
-}
-
 /**
  * Viewport fix pipeline runner.
  *
@@ -5177,82 +5253,58 @@ const logger = createLogger({ enabled: false, prefix: 'ViewportReplacer' });
 function configure(debug) {
     logger.configure({ enabled: debug });
 }
+async function runTracked(label, fn) {
+    const t = perf$3.mark(label);
+    await fn();
+    perf$3.measure(label, t);
+}
+async function runPhase(phaseKey, methodName, entries, ctx) {
+    await runTracked(`${phaseKey}.${methodName}`, async () => {
+        for (const { name, fn } of entries) {
+            logger.log(`[${methodName}] ${name}`);
+            await runTracked(`${phaseKey}.${name}.${methodName}`, () => fn(ctx));
+        }
+    });
+}
+function collectGlobalEntries(fixes, method) {
+    return fixes
+        .filter((fix) => fix[method] != null)
+        .map((fix) => ({ name: fix.name, fn: fix[method] }));
+}
+function shopEntry(shopFix, method) {
+    if (!shopFix?.[method])
+        return [];
+    return [{ name: 'shop', fn: shopFix[method] }];
+}
+function waitForAnimationFrame() {
+    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+function resolveFirstDimensions(ctx, candidates) {
+    for (const { name, getDimensions } of candidates) {
+        if (!getDimensions)
+            continue;
+        const dims = getDimensions(ctx);
+        if (dims) {
+            logger.log(`Dimensions from ${name}:`, dims);
+            return dims;
+        }
+    }
+    return null;
+}
+// ── Pipeline ──────────────────────────────────────────────────────────────────
 async function run$1(ctx, activeGlobal, shopFix) {
-    // ── Phase 1: beforeProcess ────────────────────────────────────────────────
-    const t1 = perf$3.mark('phase1.beforeProcess');
-    for (const fix of activeGlobal) {
-        if (fix.beforeProcess) {
-            logger.log(`[beforeProcess] ${fix.name}`);
-            const t = perf$3.mark(`phase1.${fix.name}.beforeProcess`);
-            await fix.beforeProcess(ctx);
-            perf$3.measure(`phase1.${fix.name}.beforeProcess`, t);
-        }
-    }
-    if (shopFix?.beforeProcess) {
-        logger.log('[beforeProcess] shop');
-        const t = perf$3.mark('phase1.shop.beforeProcess');
-        await shopFix.beforeProcess(ctx);
-        perf$3.measure('phase1.shop.beforeProcess', t);
-    }
-    perf$3.measure('phase1.beforeProcess', t1);
-    // ── Phase 2: process ──────────────────────────────────────────────────────
-    const t2 = perf$3.mark('phase2.process');
-    for (const fix of activeGlobal) {
-        if (fix.process) {
-            logger.log(`[process] ${fix.name}`);
-            const t = perf$3.mark(`phase2.${fix.name}.process`);
-            await fix.process(ctx);
-            perf$3.measure(`phase2.${fix.name}.process`, t);
-        }
-    }
-    perf$3.measure('phase2.process', t2);
-    // ── Phase 3: afterProcess ─────────────────────────────────────────────────
-    const t3 = perf$3.mark('phase3.afterProcess');
-    if (shopFix?.afterProcess) {
-        logger.log('[afterProcess] shop');
-        const t = perf$3.mark('phase3.shop.afterProcess');
-        await shopFix.afterProcess(ctx);
-        perf$3.measure('phase3.shop.afterProcess', t);
-    }
-    for (const fix of activeGlobal) {
-        if (fix.afterProcess) {
-            logger.log(`[afterProcess] ${fix.name}`);
-            const t = perf$3.mark(`phase3.${fix.name}.afterProcess`);
-            await fix.afterProcess(ctx);
-            perf$3.measure(`phase3.${fix.name}.afterProcess`, t);
-        }
-    }
-    perf$3.measure('phase3.afterProcess', t3);
-    // ── Phase 4: getDimensions ────────────────────────────────────────────────
+    await runPhase('phase1', 'beforeProcess', [...collectGlobalEntries(activeGlobal, 'beforeProcess'), ...shopEntry(shopFix, 'beforeProcess')], ctx);
+    await runPhase('phase2', 'process', collectGlobalEntries(activeGlobal, 'process'), ctx);
+    await runPhase('phase3', 'afterProcess', [...shopEntry(shopFix, 'afterProcess'), ...collectGlobalEntries(activeGlobal, 'afterProcess')], ctx);
     const t4 = perf$3.mark('phase4.getDimensions');
-    return new Promise((resolve) => {
-        requestAnimationFrame(() => {
-            let dimensions = null;
-            // Priority: shop → global → default
-            if (shopFix?.getDimensions) {
-                dimensions = shopFix.getDimensions(ctx);
-                if (dimensions)
-                    logger.log('Dimensions from shop fix:', dimensions);
-            }
-            if (!dimensions) {
-                for (const fix of activeGlobal) {
-                    if (fix.getDimensions) {
-                        dimensions = fix.getDimensions(ctx);
-                        if (dimensions) {
-                            logger.log(`Dimensions from global fix [${fix.name}]:`, dimensions);
-                            break;
-                        }
-                    }
-                }
-            }
-            if (!dimensions) {
-                dimensions = { height: getFinalHeight(ctx.doc, ctx.win), width: getFinalWidth(ctx.doc) };
-            }
-            logger.log('Final dimensions:', dimensions);
-            perf$3.measure('phase4.getDimensions', t4);
-            resolve(dimensions);
-        });
-    });
+    await waitForAnimationFrame();
+    const dimensions = resolveFirstDimensions(ctx, [
+        ...(shopFix ? [{ name: 'shop fix', ...shopFix }] : []),
+        ...activeGlobal,
+    ]) ?? { height: getFinalHeight(ctx.doc, false), width: getFinalWidth(ctx.doc) };
+    logger.log('Final dimensions:', dimensions);
+    perf$3.measure('phase4.getDimensions', t4);
+    return dimensions;
 }
 
 const registry = new Map();
@@ -5445,20 +5497,6 @@ async function process(s) {
         perf$3.endSession();
         s.logger.groupEnd();
         s.logger.log('Process completed:', result);
-        s.heightObserver.stop();
-        s.heightObserver.start(s.iframe, {
-            iframe: s.iframe,
-            debug: s.config.debug,
-            throttleMs: 25,
-            debounceMs: 500,
-            onHeightChange: (result) => {
-                s.config?.onSuccess?.(result);
-                dispatchDimensionsEvent(result);
-            },
-            onError: (error) => {
-                s.config?.onError?.(error);
-            },
-        });
         s.config.onSuccess?.(result);
         dispatchDimensionsEvent(result);
     }
@@ -5510,6 +5548,26 @@ function stop$1(s) {
     s.running = false;
     s.logger.log('Stopped');
 }
+function startHeightObserver(s) {
+    if (!s.iframe || !s.config)
+        return;
+    s.heightObserver.stop();
+    s.heightObserver.start(s.iframe, {
+        iframe: s.iframe,
+        debug: s.config.debug,
+        throttleMs: 25,
+        debounceMs: 500,
+        cooldownMs: 1000,
+        startDelayMs: s.config.heightObserverStartDelayMs,
+        onHeightChange: (result) => {
+            s.config?.onSuccess?.(result);
+            dispatchDimensionsEvent(result);
+        },
+        onError: (error) => {
+            s.config?.onError?.(error);
+        },
+    });
+}
 async function recalculate$1(s) {
     if (!s.running) {
         s.logger.warn('Fixer is not running.');
@@ -5548,6 +5606,7 @@ function createOrchestrator() {
         enableNavigationBlockingMessage: () => s.navigationBlocker.enableMessage(),
         disableNavigationBlocking: () => s.navigationBlocker.disable(),
         disableNavigationBlockingMessage: () => s.navigationBlocker.disableMessage(),
+        startHeightObserver: () => startHeightObserver(s),
         isRunning: () => s.running,
         getStateInfo: () => ({
             isRunning: s.running,
@@ -5606,6 +5665,7 @@ function createIframeHelper() {
         stop: () => stop(s),
         recalculate: () => recalculate(s),
         enableNavigationBlocking: () => enableNavigationBlocking(s),
+        startHeightObserver: () => s.fixer.startHeightObserver(),
         isRunning: () => s.running,
     };
 }
@@ -6637,6 +6697,7 @@ const useHeatmapIframeProcessor = () => {
                 if (height)
                     setIframeHeight(height);
                 setIsDomLoaded(true);
+                helperRef.current?.startHeightObserver();
             },
         });
     }, [deviceType]);
@@ -6663,6 +6724,7 @@ const useHeatmapIframeProcessor = () => {
                 if (height)
                     setIframeHeight(height);
                 setIsDomLoaded(true);
+                helperRef.current?.startHeightObserver();
             },
         });
     }, [viewport]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -6691,6 +6753,7 @@ function startIframe({ helperRef, iframe, shopId, deviceType = EDeviceType.Deskt
         iframe,
         debug: true,
         shopId,
+        heightObserverStartDelayMs: 1000,
         onSuccess: (data) => {
             perf$1.measure('IframeHelper processing', tHelper);
             perf$1.measure('Total render', t0);