Fix the rerender loop of profile hero data

[vidvidvid]

Overview

What features/fixes does this PR include?

As the title suggests + refactored the other player profile sections' animations with the custom useAnimation hook.
Renamed useAnimation to useAnimateProfileChanges.

Please provide the GitHub issue number

Closes #984

Follow up Improvement Ideas

• player skills still don't refresh
• think about renaming the useAnimation hook to something else to avoid the confusion (https://usehooks.com/useAnimation/)

Implementation

Describe technical (nontrivial / non-obvious) parts of your code

Read the comment

paired-with: @firattale

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/metafam/the-game/FkrtrC9EhfrELWHQoYJ7G4G3rr1i
✅ Preview: https://the-game-git-fix-rerender-profile-hero-data-metafam.vercel.app

[firattale]

Hi @vidvidvid , I fixed that UI issue in my #962 issue, this was a broad issue that I created and I sent my commits to that branch. Maybe we can deploy that issue. You can check my fix/several-ui-improvements branch. The problem was happening because useAnimation is having updateFN as a dependant and that was creating an infinite loop, so just removing that was successful.

useEffect(() => { setAnimation('fadeOut'); setTimeout(() => { updateFN(); setAnimation('fadeIn'); }, 400); // eslint-disable-next-line react-hooks/exhaustive-deps }, [depends]);

[vidvidvid]

Hi @vidvidvid , I fixed that UI issue in my #962 issue, this was a broad issue that I created and I sent my commits to that branch. Maybe we can deploy that issue. You can check my fix/several-ui-improvements branch. The problem was happening because useAnimation is having updateFN as a dependant and that was creating an infinite loop, so just removing that was successful.

useEffect(() => { setAnimation('fadeOut'); setTimeout(() => { updateFN(); setAnimation('fadeIn'); }, 400); // eslint-disable-next-line react-hooks/exhaustive-deps }, [depends]);

aaaa, okay, i see. will fix my pr than to match your solution and test if the rest of the components where i used useAnimation are updating and animating as expected 👍

[vidvidvid]

The rest of the components were subscribed to the same player or user object that changed each time one of the sections' data changed, so the rest of the sections got animated as well. I solved this by combining your solution and mine - so not listing the updateFN in dependencies and still comparing previous value to current value.

[firattale]

LGTM

[firattale]

LGTM!