Leaking/performance issues when adding/removing from tree

[ccnokes]

If the player is added/removed from the tree, something internally is leaking and it can cause the animation to jank and then the page to crash.

See this sandbox: https://codesandbox.io/s/elated-tdd-pvhkf?file=/src/App.tsx

Click the toggle button once. Everything works and the animation shows. Click it twice and it might be a bit slower. 3-4+ times (at least on my computer) it slows to a crawl and the page becomes unresponsive.

[mifi]

Thanks for nice report! I also managed to reproduce the issue with your codesandbox.

Seems this is an issue with upstream lottie-web. I found these: https://github.com/airbnb/lottie-web/issues/1159 https://github.com/airbnb/lottie-web/issues/2151

The solution is to use something like lodash.clonedeep on the animationData. e.g. animationData={cloneDeep(animationData)}

I will update react-lottie-player with this cloning code, because this is such a sneaky bug and it shouldn't be on the developers' shoulders to have to experience this crash.

[mifi]

this will be fixed in the next version

[victorlaforga]

I upgraded to 1.3.2 but with no result... Could you help me with this?

https://pensive-gates-96535d.netlify.app/

[mifi]

I believe your issue is #30, please continue discussion there

[ccnokes]

🎉🎉🎉