fix: replace setTimeout with requestAnimationFrame for fitView#351
fix: replace setTimeout with requestAnimationFrame for fitView#351itvi-1234 wants to merge 3 commits into
Conversation
…collision resolution Signed-off-by: itvi-1234 <rjsumit71@gmail.com>
Signed-off-by: itvi-1234 <rjsumit71@gmail.com>
|
Hi @AgniveshChaubey , could you please review this PR whenever have some time |
Preview Deployed!
Last updated at 2026-06-06T10:41:38Z |
…on node update Signed-off-by: itvi-1234 <rjsumit71@gmail.com>
| useEffect(() => { | ||
| if (!collisionResolved) return; | ||
| const rafId = requestAnimationFrame(() => { | ||
| fitView({ padding: 0.05, duration: 300 }); |
There was a problem hiding this comment.
reducing the animation duration makes the UX look a bit odd. Also, requestAnimationFrame did make the animation a bit smooth, but when you look closely, you'll still notice that the zoom-in is happening in steps. It would be a good idea to figure out the root cause and fix that instead of applying patches.
There was a problem hiding this comment.
Hey all,
I am exploring the root causes of this and I found something which I'd like to share with you.
This problem occurs because the canvas is animating its viewport scale before the node measurement(after nodes are initially rendered) have finished. So this create a sudden jerky visual jump.
Some root causes might be :
Unmeasured node dimension: This happens when we have fitView: true enabled or trigger a viewport change on mount, react flow calculates the zoom level using unmeasured (0, 0) dimensions. A millisecond later, the DOM renders the nodes, updates their width/height boundaries, and React Flow snaps the camera hard to fix the view.
Asynchronous Layout Engines & fitView Loops: This happens when the layout algorithms like Dagre etc. to auto-arrange elements on load, these manipulate positions asynchronously.
If a zoom action begins before the data finishes mapping or before setNodes() fully finishes updating the internal React Flow store, the math behind the zoom focal point gets broken by stale positioning, causing the canvas to glitch back and forth.
React 18 Concurrent Rendering & React.StrictMode:
In development environments, React.StrictMode renders component hierarchy twice.
Two overlapping zoom adjustments attempt to lock on the state coordinates simultaneously.
These above causes found out from an internet, we have to see that if one of these causing the problem or not , And might be there could be other causes as well that would be need to find out.
|
We're about to release v0.9.0, but we can't move ahead with this recently introduced issue. If anyone has some time, can we look into this? That'll help us proceed with the release. |
3 participants
Description
Replaced
setTimeoutwithrequestAnimationFrame(rAF) and removed the animation duration.By using
requestAnimationFrame, we sync ourfitViewcall exactly with the browser's paint cycle. This guarantees thatfitViewfires instantly after the DOM has fully committed the resolved node positions, making the load sequence look like a single, seamless frame.closes #348
Before (the jerky situation)
After (the smooth)