[BUG] - Choppy Animations Mobile First Paint

[SamuelQuinones]

Describe the bug On mobile devices, on the app first paint, the animations don't seem to load properly. Upon closing the browser app and re-opening, the issue is fixed.

To Reproduce

1. open a new tab in chrome on mobile
2. try to use the checkbox or change to advanced settings

Expected behavior The animations to be smooth

Smartphone (please complete the following information):

• Device: iPhone 12
• OS: ios 14.6
• Browser Chrome
• Version 92.0.4515.90

Additional context The issue does not seem to happen on iOS safari, the collapse component seems fine as well.

[SamuelQuinones]

Issue does not seem to happen on android devices

[SamuelQuinones]

Issue May be resolved by an animation library like

• react-spring
• framer-motion

[SamuelQuinones]

mostly fixed by switching to framer-motion in e04d9b07cf164d6d21eae76372566ea2346b42c9

Still to fix:

• modals
• switches - may not fix this as fixing animations may mean more renders

[SamuelQuinones]

won't fix switches

modals to be fixed as part of #14