#4951 closed enhancement (wontfix)
Style changes for AJAX loading spinners
Reported by: | henrywright | Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | 1.7 |
Component: | Templates | Keywords: | 2nd-opinion ux-feedback needs-testing |
Cc: | karmatosed@… |
Description
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).
Attachments (1)
Change History (23)
#1
@
12 years ago
- Component changed from Messaging to UX/UI
- Keywords dev-feedback added; ajax loader removed
- Summary changed from Ajax spinner not appearing on submit button when composing a new private message to Ajax spinner not appearing in buttons / tabs
- Type changed from task to enhancement
- Version changed from 1.6.4 to 1.7
#2
@
12 years ago
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.
#3
@
12 years ago
- Keywords needs-patch added
- Milestone changed from Awaiting Review to 1.8
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.
#6
@
11 years ago
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)
#7
@
11 years ago
@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.
#8
@
11 years ago
@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:
Note: you can add/remove the loading class by clicking on the button
#9
@
11 years ago
@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.
#10
@
11 years ago
@karmatosed, i think the button style can be improved on though. My eye for design isn't too great :{
#11
@
11 years ago
@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 } }}}
#12
@
11 years ago
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?
#13
@
11 years ago
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; }
#14
@
11 years ago
Opacity does seem to be supported in all browsers, even the older versions:
/* 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
#15
@
11 years ago
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.
#16
@
11 years ago
- Keywords has-patch added; needs-patch removed
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.
#17
@
11 years ago
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.
#18
@
11 years ago
@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)
#19
@
9 years ago
- Component changed from General - UX/UI to Appearance - Template Parts
- Keywords 2nd-opinion ux-feedback needs-testing added; dev-feedback has-patch removed
- Summary changed from Ajax spinner not appearing in buttons / tabs to Style changes for AJAX loading spinners
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.