Optimize animations for Chromecast

[joeyparrish]

The buffering spinner is today based on SVG + CSS3 animation. It appears to perform poorly on Chromecast. Visually, it is not animating smoothly.

I have tried a few alternatives, but it is not yet clear if the spinner itself is fully to blame. Before we go further on creating a new spinner, we should do a quantitative analysis of the performance issues we're seeing.

Here are some ideas here that may be useful once we have some baseline data:

• https://plus.google.com/110558071969009568835/posts/NMDm5mDhm6J
• http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

The G+ post suggests that the idle card may influence performance even while hidden. The HTML5 Rocks article suggests that we should avoid animating colors. Both articles recommend against the use of shadows.

Here are some open-source CSS spinners: https://github.com/lukehaas/css-loaders
Many of these use shadows, but if we relax the author's single-div requirement, some of them can be done with background colors and transforms.

[avelad]

@joeyparrish I'm not sure we add it, since we want to do #4214 in the future

[joeyparrish]

Fair. I think it's also somewhat better since this issue was originally filed 6 years ago. The spinner used to also change colors. :-)