Find a wallet table: fade icons in and out when dropdown select is changed

[corwintines]

Description

• Adds functionality in for fading out and in the feature icons for a wallet in the WalletTable component.

[gatsby-cloud]

Gatsby Cloud Build Report

ethereum-org-website-dev

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 12m

[corwintines]

Open to changing the timing of this animation. Some user feedback from user testing suggested that the compare features didn't seem like they were doing anything because the icons weren't updating (they were, just didn't look like it since they didn't change). This adds a fade-in and out animation to give the appearance of things changing, even if it's just going from true for one feature to true for another.

[minimalsm]

Nice :-)

Agree on changing the timing... it feels a little too dramatic as is 😅.

Also left a comment about us picking an animation convention and but not necessarily a blocker to this PR.

[minimalsm]

Should we decide on a convention of how we animate (maybe framer-motion?) on ethereum.org?

We now have at least three ways to animate:

• motion components
• CSS animations
• keyframes

[corwintines]

Agree. I know that we use framer for a lot of other animations so will refactor to that.

[minimalsm]

LGTM.

@nloureiro or @konopkja to review?

[konopkja]

looks good to me

[nloureiro]

LGTM.

@nloureiro or @konopkja to review?

Just to be sure, are we working on this fading?

fading.icons.mov

If yes, it looks good!

[minimalsm]

@nloureiro yes :-)! thanks guys, merged!