Style changes for AJAX loading spinners

[henrywright]

The ajax-loader.gif image isn't displaying after clicking on Send:
​http://testbp.org/members/username/messages/compose/

...whereas the spinner image does display when replying to a message:
​http://testbp.org/members/username/messages/single/

Not sure if the spinner image should display (in which case it'll be a bug) or if the ajax-loader-image functionality hasn't been implemented on that particular button (in which case it is merely an inconsistency - e.g not a bug).

[r-a-y]

1.7's theme compatibility removed the AJAX loading image:
​https://buddypress.trac.wordpress.org/ticket/4610

I'm actually in agreement with you that this is a UX problem and would like to reinstate the AJAX image loader, but I'd like some feedback from the other devs before we do this.

[johnjamesjacoby]

In bp-legacy, we intended to do away with the spinner completely, and went with an easier-to-match sort of throbbing button instead. Trying to float the spinner and resize DOM elements was goofing with theme layouts in theme compat, and I'd like to either stay away from spinners completely, or dream up some new and improved UI for providing processing feedback to the user.

[r-a-y]

I understand the reasons behind the throbbler. I think we can do a better job with it. Right now, the effect is too subtle and does not catch all AJAX instances like the private message button as henrywright stated above.

Perhaps changing the color when it's in use and making it a bit bolder will do wonders.

Moving to 1.8 for now, but can move it back to 1.7-branch if there's a patch before then.

[henrywright]

Picking up on what johnjamesjacoby said about removing the spinner due to it goofing theme layouts, how about opting for a background effect such an animation effect? Please refer to example provided (note the animate stripes is just an example i plucked out of the air. The background effect could be anything)

​http://jsfiddle.net/h68Wm/

[karmatosed]

@henrywright: whilst I understand the idea I feel a background effect could be more issues than a small spinner for themes. That works ok as a UI if you have a colour but on white it just looks odd. This is the bane of theme compat - finding something that works for as many cases as possible.

Perhaps a 'state' would work but I'd be cautious about what occurs and particularly with regards to a full background effect of any form.

One potential would be for the button fading in / out. Maybe it could appear to stay pressed until it's loaded once you click so it's 'thinking about it'. I'm going to have a go at some ideas myself here as feel there has to be something we're missing (and I am missing) that fits.

[henrywright]

@karmatosed

Your idea of the button appearing pressed whilst the loading class is applied sounds like it could work. i've create an example of what the effect could look like:

​http://jsfiddle.net/ZvR92/

Note: you can add/remove the loading class by clicking on the button

[karmatosed]

@henrywright: ooo I kind of like that. I love how it's not any impact on the theme just causes a 'disabled' look. I reckon that's a good candidate and interested in what others think.

[henrywright]

@karmatosed, i think the button style can be improved on though. My eye for design isn't too great :{

[karmatosed]

@henrywright: I think we can inherit a lot though just do an opacity?

What I am imagining is:

a {
	// whatever the button does from theme
        opacity: 1;
}

a.loading {
	opacity: 1;
       //maybe have a fade css technique to go into the opacity
} }}}

[henrywright]

Didn't think of using opacity! i suppose the best approach is the approach works across all browsers. Can I ask which browsers you design for at BP? just thought we might struggle when using my approach with browsers such as IE. i will have to check

[karmatosed]

I may be corrected but I think the latest of every browser and no later than ie 9 is usually the way. I personally try and look in ie 8 but it's limited what you do there. We can degrade gracefully though and just not show for older.

For opacity I'd recommend something like this (bit over kill but ok to do):

.blocktobetransparent {
	zoom: 1;
	filter: alpha(opacity=50);
	opacity: 0.5;
}

[henrywright]

Opacity does seem to be supported in all browsers:

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;

Source: css-tricks.com

[modemlooper]

If you use opacity then you have to be careful it doesn't look out of place when the background is another color. bleeding through can look weird.

[r-a-y]

Perhaps something like this would work?
​http://codepen.io/cemre/pen/wFjIB

Too in-your-face? Works in IE10+. We'll need to add a fallback background color for IE9 users.

[johnjamesjacoby]

I like this a lot for any buttons that are wired up for an ajax response. I still don't mind the throb, for what it's worth.

[henry.wright]

@r-a-y the candy stripe looks neat. If you want some further inspiration (and a headache), I came across this resource full of preloader examples. ​http://ilovepreloaders.tumblr.com/ - had been useful to me in the past.

My own personal favourite is the Facebook-like throbber from ​http://css-spinners.com/ (which is the first link on that 'ilovepreloaders' resource list)

[DJPaul]

Closing most tickets related to BP-Default and BP-Legacy, since the upcoming BP-Nouveau template pack (planned for 3.0) will make these redundant.

[DJPaul]

Closing most tickets related to BP-Default and BP-Legacy, since the upcoming BP-Nouveau template pack (planned for 3.0) will make these redundant.