Animation of throbber-active.gif image is broken

Updating title spelling so this issue is found by search.

Dont know why previous one is not working, I have added a new one, copied from D7. This is working fine. Please test it.

It seems it was tried to add some pixels to the left of the icons.

Off topic: Any good docs about "stable" theme, I feel annoyed about it to do things twice. While it's stable and patching stable. It's a bit crazy to me.

I'm having a look at this right now.

Attached is a patch that replaces the Drupal 8 versions of throbber-active.gif with that from Drupal 7. This includes both the instance found in core/misc/ as well as that of the stable theme.

This is a temporary fix to restore the animation to the .gif currently in core. Thankfully, there is considerable work being done to replace this graphic entirely with a modern approach over here: #1974928: Update throbber icon.

IIRC, The icon that was committed two years ago seems to have disabled spinning for performance purposes:

#1891764: Autocomplete throbber causes excessive CPU usage on some browsers
#1069152: Throbber in textfield is misaligned when browser hardware acceleration enabled (gfx)
Similar but not directly related: #659486: Add back the "loading" image to the Overlay in a way that does not kill performance

Mentioned this on #1974928-54: Update throbber icon.

Not sure if this was purposeful, or actually accidental. The issue #1069152 seems to describe that the whole purpose of splitting the images apart was so that one could be animated to avoid performance issues... but the actual code that got committed wasn't animated (confusing).

If it turns out that this was infact purposeful, then i would love to see effort and resources on this issue instead going towards hi-dpi compliant SVG rather than perpetuating oldskool GIF animations (I consider this to actually be a distraction from getting the modern SVG solution in sooner). Check out and participate in #1974928: Update throbber icon if this interests you.

@jwilson3,

Nope, it was correct GIF.

the current bug introduced in #2329649: Fix node create page RTL CSS

@hass the patch seems to apply cleanly for me. Guessing this is a binary issue or an OS issue?

As for the issue at hand, while I agree that our efforts should be on modernizing our throbber animation, I'd say that getting the current animated GIF fixed (animated) would be a good thing in addition to the work that needs to occur over in #1974928: Update throbber icon. This change is a much more discrete set of changes and I can foresee the SVG work taking a bit longer to implement. FWIW I'm trying to do my part and get that wrapped up as well.

@droplet @jwilson3 what do you guys think? Should we move forward with fixing the animation here AND try to wrap up #1974928: Update throbber icon OR just focus on #1974928: Update throbber icon? If we're saying the former, what needs to happen here? As of now, I'm confused as to what (if anything) needs to occur. If we're saying the latter, should we close this and mark as "Closed (won't fix)".

Just tested (both ltr & rtl). It's worked.

@chrisfree: It's rtbc now (thanks droplet!) so I guess no harm having it go through the motions at this point.

So given that #2329649: Fix node create page RTL CSS was all about rtl support - how about some rtl screenshots so show we haven;t regressed there.

@hass the current image from D8 is 17px wide and the old image is 15px this is because the D7 image has 2px of padding on the left but not on the right. Whereas the D8 image tries to have 2px on the right as well. Imho adding padding as part of the image is a problem. Yes the throbber should work BUT it should also look good on RTL as well.

Also the previous image changed inactive throbber image as well so not changing here would result in RTL weirdness - let's just do the right thing and either make the 17px version work or make a version with no padding on either side and add padding correctly using CSS.

Yes, we should use the animated version of the throbber from D7 (no padding embedded in the image) and ensure that this works on both standard and RTL. I should have some availability tomorrow to try and fix this up.

@chrisfree unfortunately the D7 image has 2px of padding on the left. Hence #2329649: Fix node create page RTL CSS which tried to add 2px of padding on the right. I think the reason the image has padding is because the image is often floated. So the right thing to do is to add the 2px imo.

So looking at the D7 image in more detail the padding is on the right... here is an image with 2px of padding on the left and the animation still working...

Opps forgot stable and here's the screenshots too...

Screenshots look good, let's do this.

Looking good! Tested the patch locally with LTR and RTL themes.

Committed/pushed to 8.1.x and cherry-picked to 8.0.x. Thanks!