[C-1760] Fix lineup-tile animation lag

[dylanjeffers]

Description

• Fixes lineup tile animation lag by fading in lineup tiles on intial render, vs waiting for image to load
  Before:
  https://user-images.githubusercontent.com/8230000/211402768-fa025f15-d299-439b-a32e-1862febf278d.mov

After:
https://user-images.githubusercontent.com/8230000/211397550-3b8e8fd4-fbf5-4899-a002-5e7501d3c9ca.mov

Dragons

@sliptype def want your advice/ideas around this. Things ive been considering:

• Don't wait till image load for tile animation to trigger, just do it on first render
• Still have the opacity animation, but rather than apply to every tile, potentially to the ones visible or some first n?
• Prob worth a discussion with ux as well.
• Also, the onLoad callback for image load, do we need that? i couldnt find a case where it was actually provided?

My personal feelings: I prefer the speed improvements over the animation, so id be happy to roll forward with existing changes.

[sliptype]

Having the opacity animation was definitely intentional, I do agree with you that this feels a little snappier though. I think waiting for the image to load before doing the animation is going to cause things to feel slow. We do have a timeout of 1s where we trigger the animation regardless

I guess I don't understand why the opacity animation wasn't smooth, especially since the image animation looks smooth? Is it still stuttery if we trigger the opacity animation immediately?

Don't think the image load prop is used for anything other than triggering the opacity animation

[dylanjeffers]

Having the opacity animation was definitely intentional, I do agree with you that this feels a little snappier though. I think waiting for the image to load before doing the animation is going to cause things to feel slow. We do have a timeout of 1s where we trigger the animation regardless

I guess I don't understand why the opacity animation wasn't smooth, especially since the image animation looks smooth? Is it still stuttery if we trigger the opacity animation immediately?

Don't think the image load prop is used for anything other than triggering the opacity animation

Gotcha, yeah i can play around with different options, my guess though is that having 30+ opacity animations on pages like the trending screen is the main reason for slowness, and not sure what can be done about that, other than being smarter about which track-tiles actually receive opacity, like the first three maybe?

[sliptype]

Having the opacity animation was definitely intentional, I do agree with you that this feels a little snappier though. I think waiting for the image to load before doing the animation is going to cause things to feel slow. We do have a timeout of 1s where we trigger the animation regardless
I guess I don't understand why the opacity animation wasn't smooth, especially since the image animation looks smooth? Is it still stuttery if we trigger the opacity animation immediately?
Don't think the image load prop is used for anything other than triggering the opacity animation

Gotcha, yeah i can play around with different options, my guess though is that having 30+ opacity animations on pages like the trending screen is the main reason for slowness, and not sure what can be done about that, other than being smarter about which track-tiles actually receive opacity, like the first three maybe?

Let's ask in #product-design, I'm not sure how attached people are to the animation. I would like to keep it simple, if we can get rid of the animation and get a big perf win

[sliptype]

Love it!

[sliptype]

Does 0.3 initial opacity look better with this new animation?

[dylanjeffers]

yeah it does, starting at 0.5 it doesnt feel full enough. happy to tweak this stuff as we play with it?