988674 - Get rid of data URIs for loading spinners in our CSS

Status: RESOLVED WONTFIX

(Marketplace Graveyard :: Consumer Pages, enhancement, P5)

Description

[Christopher Van Wiemeersch [:cvan]]

(1) We have way too many data URIs for throbbers. Why do we not have just one?
(2) Let's not use data URIs and instead just use CSS for the throbbers if we can.

Comment 1

[Mathieu Pillard [:mat]]

We'd gain 4 kilobytes (after gzip) in include.css by removing the data URIs spinners from lib.styl (*). Since include.css is 26K gzipped, that'd be a pretty good improvement.

(*) The added code for CSS animations would be negligible, since it would compress way better.

Comment 2

[Christopher Van Wiemeersch [:cvan]]

Awesome. Just to make sure, let's keep the data URI for the Marketplace logo in `splash.styl` though.

Comment 3

[Mathieu Pillard [:mat]]

So, the key is to find a nice animation that:
- Looks good
- Doesn't use images
- Doesn't do too much painting (see also bug 1091654 - activate paint highlighting in devtools when developing)

I think the best bet is to make a CSS animation rotating an element with some border-radius with different colors and maybe different widths.

I've done some ground work for this in https://github.com/diox/fireplace/tree/improve-spinner-animations but I don't think I'm not the right person to fix this, it requires a better eye for design than I do :) Leaving this to somebody else.