Ajax button CSS quirk

[jbobich]

In the new legacy theme, when you click any button on the frontend that does an AJAX call, it will oddly pop out 25px and then pop back. -- I think you guys originally had an AJAX loader icon here before, but now you've gotten rid of it with the new theme system.

So I've removed this extra padding that gets added onto the general "loading" CSS class. Then I also set it up so the button's border darkens along with a drop shadow appearing when clicked. If you're using any modern browser other than IE9, this style change will pulsate in and out with CSS3 animation until the AJAX call is finished.

This adds a way to tell the user something is loading without changing the DOM or popping that button over wider to insert some sort of loader icon.

[jbobich]

CSS changes to general "loading" class in legacy theme.

[jbobich]

I had a typo on the webkit box shadow color on the original patch. This fixes that little guy.

[DJPaul]

The pulse thing is quite an interesting idea; it's a shame IE8/9 don't support CSS3 Animations. Suspect we'll need to re-add the spinner, but thanks for the patch and suggestions :)

[jbobich]

Replying to DJPaul:

The pulse thing is quite an interesting idea; it's a shame IE8/9 don't support CSS3 Animations. Suspect we'll need to re-add the spinner, but thanks for the patch and suggestions :)

Awesome, yeah I totally understand. -- If you do add the loader icon back, another idea you could consider is to have some sort of other icon that is there already before the button is clicked and then gets swapped with the loader icon during the Ajax action. This way, the DOM isn't changed when people are clicking these buttons, which just makes for some funky issues when theming. Anyway, just a thought.

[johnjamesjacoby]

(In [6556]) Loading (bp-legacy):

• No more ajax spinner, try a throbbing shadow instead.
• Will need additional work for IE.
• Props jbobich.
• See #4610.

[johnjamesjacoby]

Calling this fixed. We can revisit in 1.8 if we'd like to.