replace react-transition-group animations with maintained alternative

[setchy]

📝 Provide a description of the new feature

Started seeing this in the dev logs when interacting with notification rows

"Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference.

I believe this is coming from our limited use of https://github.com/reactjs/react-transition-group

➕ Additional Information

No response

[afonsojramos]

I can take a look at this 👀

[setchy]

I did a quick search around for alternatives, and framer/motion seemed to stand out as a maintained alternative.

Long shot, but with react-transition-group being under reactjs, they may address it, or take the leap to formally archive the repo

[afonsojramos]

@setchy I was trying to look into a more leaner approach, so in this case, css animations using tailwind, but for that I'd need to mess around with the remove notification.

This is because react-transition-group seems to work by monitoring react changes. This means that we would potentially need to add a delay, either before the rerender or before the removal, to give time for the animation to finish. Thoughts?

[afonsojramos]

However, it does seem that framer/motion have some leaner alternatives as well.

Which would give us what we want for just 19kb.

[setchy]

I have little (ie: no) experience here haha. Happy to go with whichever you think is best.

Is there any other animations/transitions we'd add in future? If so, perhaps the framer route would open up more possibilities 🤷

[afonsojramos]

Yeah, you're right! I just wasn't aware of this leaner alternative using framer (as it is a heavy library by default - which to us isn't that big of a deal as we just send everything to the user using a binary, but we still don't want bloat if possible)