Animation reset or stop when component is rerendered

[oliviercperrier]

Is there an existing issue for this?

• [X] I have searched the existing issues

Do you want this issue prioritized?

• [ ] Yes, I have sponsored
• [ ] Not urgent

Current Behavior

I have a button component with a Spinner (using moti animation). This spinner shows up when the loading props is set to true. The button opacity also change when the button is hovered. When the button is loading and hovered (in/out), the spinner animation reset or stop because de MotiView is rerendered.

Expected Behavior

The spinner animation should not stop or be reset when the MotiView is rerendered

Steps To Reproduce

See reproduction

Versions

see reproduction

Screenshots

No response

Reproduction

https://stackblitz.com/edit/nextjs-e2vcnq?file=pages%2Findex.tsx

[oliviercperrier]

@nandorojo This is blocking for us, if its possible to fix or if there is an alternative it would be appreciated. Thanks

[nandorojo]

If it's urgent for you, you can check the "I've sponsored" box in the original post.

Otherwise, I will take a look when I have time.

Consider memoizing the spinner.

[nandorojo]

Maybe this will fix it

https://stackblitz.com/edit/nextjs-cffja2?file=components%2FButton.tsx

[oliviercperrier]

@nandorojo Thanks for the quick response. In fact, memoizing works for use case! Thanks

i would still let this issue open (not urgent)

[nandorojo]

Glad it helped.

This is blocking for us, if it's possible to fix or if there is an alternative it would be appreciated. Thanks

For future reference, please consider sponsoring before tagging me.