Skip to:
Content

Opened 12 months ago

Last modified 9 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: UX/UI Keywords: dev-feedback needs-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).

Change History (15)

comment:1 r-a-y12 months 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 johnjamesjacoby12 months 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-y12 months 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 karmatosed12 months ago

  • Cc karmatosed@… added

comment:5 boonebgorges11 months ago

  • Milestone changed from 1.8 to Future Release

comment:6 henrywright10 months 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 karmatosed10 months 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 10 months ago by karmatosed (previous) (diff)

comment:8 henrywright10 months 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 karmatosed10 months 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 henrywright10 months ago

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

comment:11 karmatosed10 months 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 10 months ago by karmatosed (previous) (diff)

comment:12 henrywright10 months 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 10 months ago by henrywright (previous) (diff)

comment:13 karmatosed10 months 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 henrywright10 months 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 10 months ago by henrywright (previous) (diff)

comment:15 modemlooper9 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.

Note: See TracTickets for help on using tickets.