Profile hero fields are flashing

[vidvidvid]

What happened?

All of the profile hero items are flashing and availability is not even displayed. Happens both locally and in production. Probably the fields are constantly being rerendered for some reason.

What did you expect to happen?

The profile hero data should not be flashing :P

How can we reproduce the problem (as minimally as possible)?

go to http://localhost:3000/player/vid
or https://my.metagame.wtf/player/vid

try other players as well

Is there anything else we need to know?

related pr: #963

Assets

[vidvidvid]

@firattale maybe you could look into it?

[vidvidvid]

Yup, did a little bit of logging and it seems like the component is rerendering like there's no tomorrow. Some vicious loop is going on.

[vidvidvid]

Sorry @firattale 😅 I went ahead and fixed the useAnimation hook that you made and implemented it in other profile sections. I just compared the old and new values and didn't retrigger the animation if they were the same. Somehow the depends value from useEffect was always different. Probably because

1. in the component the depends variable was set
2. it triggered the useAnimation
3. the animation triggered the rendering of the component
4. the depends variable was again set and even though its value might have been the same, its reference wasn't, so this loop kept on repeating.

Not sure if this is the right interpretation, but I think what happened was probably something along these lines.
PR: #985