motiondivision
[BUG] AnimatedPresence stuck when state changes too fast.
2. Describe the bug
- I have a loading state and a rendered data page. When loading and rendered alternate fast (example: you change the selected id fast through a list), the animated presence component will get stuck in the loading component. If i remove the key from motion.div it fixes the issue, but the animations dont work.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
A CodeSandbox minimal reproduction will allow us to quickly follow the reproduction steps. Without one, this bug report won't be accepted.
4. Steps to reproduce
https://codesandbox.io/p/sandbox/nrn9t7
Steps to reproduce the behavior:
- Go to codesanbox
- Click on "change" button
- Check if the right render element changes.
- If it does, refresh the codesanbox window, i added a useEffect on mount to help you reproduce it more easily.
- If the render elements continues to work try refreshing a couple of times, normally it takes me 2 to 3 tries to make the bug happen.
- Expected behaviour: the animation presence should be able to keep up with the fast changes in the render.
7. Environment details
If applicable, let us know which OS, browser, browser version etc you're using.
Windows 11 pro, chrome Version 134.0.6998.179 (Official Build) (64-bit)
Just to confirm that Carlos is not alone here, after refreshing the sandbox window a couple of times, it is stuck as "loading"
Even clicking "Change" when it's stuck, it will never get unstuck. Only a refresh (or rather remound of AnimatePresence I'd imagine) would make it unstuck. I had to refresh significantly more times than 5 though.
Linux (X11, i3), Zen (Firefox-based): 1.11.1b (Firefox 137.0) (64-bit).
