[ECO-2169] Fix animations by updating the component keys for the emoji grid items

[xbtmatt]

Description

The animations got screwed up a bit back when I was fixing the lack of a grid line when search emojis are used.

I added the index to each grid item component key, meaning it re-animates any time its position in the grid changes, but that's not what we want, because for bump order in particular, the animations are set up to be triggered by changes to the orderedGrid variable, not the component key. (They're set up this way by framer-motion, which animates the grid order, indicated by the presence of the layout prop in an animated component)

In order to fix this bug while still respecting the original fix, I've added the searchEmojis to the component keys and removed the index from the component key.

Thus the searchEmojis changing will trigger a re-render, which subsequently forces the component to re-checks if the grid line on its left should be present. However, if the grid re-orders due to the bumpOrder changing, the component will animate properly because its key will remain the same, since the index is no longer in the key.

Testing

Tested it on the production branch to visually ensure things are working as expected now, but the fixes can go in right now to main and will work as expected down the road when everything is set up

Checklist

• Did you update relevant documentation?
• Did you add tests to cover new code or a fixed issue?
• Did you update the changelog?
• Did you check all checkboxes from the linked Linear task?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
emojicoin-dot-fun	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 9, 2024 5:30pm
emojicoin-dot-fun-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 9, 2024 5:30pm

[CRBl69]

👍