Skip to:
Content

BuddyPress.org

Opened 11 years ago

Closed 7 years ago

Last modified 7 years ago

#4951 closed enhancement (wontfix)

Style changes for AJAX loading spinners

Reported by: henrywright's profile 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)

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

Download all attachments as: .zip

Change History (23)

#1 @r-a-y
11 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.

#2 @johnjamesjacoby
11 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 @r-a-y
11 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.

#4 @karmatosed
11 years ago

  • Cc karmatosed@… added

#5 @boonebgorges
11 years ago

  • Milestone changed from 1.8 to Future Release

#6 @henrywright
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)

http://jsfiddle.net/h68Wm/

#7 @karmatosed
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.

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

#8 @henrywright
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:

http://jsfiddle.net/ZvR92/

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

#9 @karmatosed
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 @henrywright
11 years ago

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

#11 @karmatosed
11 years ago

@henryright: 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
} }}}
Version 1, edited 11 years ago by karmatosed (previous) (next) (diff)

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

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

#13 @karmatosed
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 @henrywright
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

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

#15 @modemlooper
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 @r-a-y
10 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 @johnjamesjacoby
10 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 @henry.wright
10 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 @DJPaul
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

#20 @DJPaul
8 years ago

  • Component changed from Appearance - Template Parts to Templates

#21 @DJPaul
7 years ago

  • Milestone Future Release deleted
  • Resolution set to wontfix
  • Status changed from new to closed

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.

#22 @DJPaul
7 years ago

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.

Note: See TracTickets for help on using tickets.