SCAL-325100 Automate pre-render position tracking via MutationObserver

[shivam-kumar-ts]

Previously, the pre-render wrapper only repositioned itself when the placeholder was resized or the container was scrolled — any other layout shift (sidebar collapse, banner insertion, window resize) would leave the wrapper misaligned, and developers had to call syncPreRenderStyle() manually. This PR adds a MutationObserver that watches the placeholder's ancestor chain for both CSS class/style changes and DOM insertions/removals, a window resize listener, and routes all three signals through a requestAnimationFrame debounce gate so rapid mutations collapse into a single position measurement taken after the browser finishes layout. The scroll listener is also unified to go through the same rAF path instead of firing on every scroll tick. Together, the wrapper now automatically stays aligned with the placeholder across all common layout shift patterns with no manual developer intervention required.

/**
     * Starts a MutationObserver that watches the placeholder's ancestor chain
     * for layout-triggering DOM changes and syncs the pre-render wrapper
     * position when the placeholder actually moves.
     *
     * Three signal sources are combined:
     *  1. `attributes` (class/style) on ancestors — CSS-driven layout shifts
     *     (sidebar collapse, theme toggle, etc.)
     *  2. `childList` on ancestors — element additions/removals that push
     *     content around (notification banners, inserted panels, etc.)
     *  3. `window` resize — viewport changes that shift position without
     *     resizing the placeholder itself.
     *
     * All signals are funnelled through a single `requestAnimationFrame`
     * gate so that (a) rapid mutation bursts collapse into one measurement
     * and (b) `getBoundingClientRect()` is called after the browser has
     * finished computing layout, avoiding mid-transition readings.
     */

// Walk ancestors from the placeholder up to (and including) the
        // container boundary. Both attribute mutations (class/style toggles)
        // and childList mutations (added/removed siblings) on any ancestor
        // can shift the placeholder's position without changing its size.

[gemini-code-assist]

Caution

The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@thoughtspot/visual-embed-sdk@604

commit: b6e2d42