Skip to:
Content

Opened 2 years ago

Last modified 12 months ago

#4951 new enhancement

Ajax spinner not appearing in buttons / tabs

Reported by: henrywright Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 1.7
Component: General - UX/UI Keywords: dev-feedback has-patch
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)

4951.candy-stripe.patch (3.3 KB) - added by r-a-y 12 months ago.

Download all attachments as: .zip

Change History (19)

comment:1 @r-a-y2 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

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.

comment:2 @johnjamesjacoby2 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.

comment:3 @r-a-y2 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.

comment:4 @karmatosed2 years ago

  • Cc karmatosed@… added

comment:5 @boonebgorges2 years ago

  • Milestone changed from 1.8 to Future Release

comment:6 @henrywright2 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)

http://jsfiddle.net/h68Wm/

comment:7 @karmatosed2 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.

Last edited 2 years ago by karmatosed (previous) (diff)

comment:8 @henrywright2 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:

http://jsfiddle.net/ZvR92/

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

comment:9 @karmatosed2 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.

comment:10 @henrywright2 years ago

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

comment:11 @karmatosed2 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
} }}}
Last edited 2 years ago by karmatosed (previous) (diff)

comment:12 @henrywright2 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? just thought we might struggle when using my approach with browsers such as IE. i will have to check

Last edited 2 years ago by henrywright (previous) (diff)

comment:13 @karmatosed2 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;
}

comment:14 @henrywright2 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

Last edited 2 years ago by henrywright (previous) (diff)

comment:15 @modemlooper23 months 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.

@r-a-y12 months ago

comment:16 @r-a-y12 months 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.

comment:17 @johnjamesjacoby12 months 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.

comment:18 @henry.wright12 months 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)

Note: See TracTickets for help on using tickets.