⚡ Bolt: Throttle Mermaid lightbox panning with requestAnimationFrame#350
Conversation
Implements `requestAnimationFrame` to throttle high-frequency DOM style updates (`style.transform`) triggered by `pointermove` and `wheel` events in the Mermaid zoom lightbox. This reduces main thread blocking and ensures smoother scrolling when panning and zooming. Includes an `immediate` flag to bypass the throttle during initial setup to prevent a 1-frame visual flash. Co-authored-by: ImChong <74563097+ImChong@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
1 participant
💡 What: Refactored the
applyTransformfunction inassets/js/mermaid-zoom.jsto throttle continuous DOM style updates usingrequestAnimationFrame. Added atransformTickingflag and animmediateargument to bypass throttling when synchronous updates are needed during initial setup.🎯 Why: Raw event listeners for
pointermoveandwheelcan fire much faster than the display refresh rate (e.g., 1000Hz gaming mice vs 60Hz display). Modifyingstyle.transformdirectly inside these event handlers forces the browser to calculate redundant layout and style changes, causing severe main thread blocking and micro-stutters during panning or zooming in lightboxes.📊 Impact: Syncs visual updates with the browser's native rendering cadence (usually 60fps), entirely eliminating micro-stutters and main thread blocking on devices with high-polling-rate input devices during zooming and panning operations.
🔬 Measurement: Load a large Mermaid diagram on the site, open the zoom lightbox, and pan/zoom continuously. Observe the scrolling smoothness and check the browser's performance profiler for reduced layout recalculation overhead and dropped frames.
PR created automatically by Jules for task 17585309652457936539 started by @ImChong