Skip to:
Content
Pages
Categories
Search
Top
Bottom

Feature Request: Ajax loading spinner

  • Avatar of godavid33
    godavid33
    Participant

    @godavid33

    There are a good handful of functions that would be a lot better w/ principles of responsive design either hard-coded in or as a configuration option. For example, clicking the post button, deleting messages, and sending a message reply all rely on AJAX but to the average user (i.e. unpatient non-developers) the site may seem slow, sticky, or broken if they click and button and nothing happens for a good bit of time, depending on how fast your server can serve up admin-ajax.php. Thusly, I propose adding a default spinner that replaces any button that uses AJAX and makes the submit button disabled until a response is receive. I custom coded this for the reply to message button, and would be more than willing to share my code, though I fully believe in the BP developers ability to do it themselves ;) I love BP and hope to see it take over the world one day.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Avatar of r-a-y
    r-a-y
    Moderator

    @r-a-y

    We used to use an AJAX spinning GIF, but removed it due to various theme issues:

    https://buddypress.trac.wordpress.org/ticket/4610

    I’ve added a patch for an alternative to the throbbler in 4951:

    https://buddypress.trac.wordpress.org/ticket/4951

    It uses a progress bar animation for the background of the button.

    Avatar of henrywright
    henrywright
    Participant

    @henrywright

    Hi @godavid33 I think users will always appreciate some sign of ‘we are working behind the scenes whilst you’re waiting’ especially when the wait happens to be for a few seconds. Perhaps you could share your code in a jsfiddle so we can see a demo?

    Avatar of godavid33
    godavid33
    Participant

    @godavid33

    Sorry, I’m a bit too lazy for jsfiddle but here is the code

    
    			jQuery('#send_reply_button').click(function(){
    				var submit_butt = jQuery(this);
    				
    				submit_butt.hide();
    				submit_butt.attr('disabled', 'disabled');
    				
    				if(!submit_butt.parent().find('.ajax-submit-gif').get(0))
    					submit_butt.parent().append("<img class='ajax-loader' src='ajax-loader.gif'/>");
    				
    				jQuery(document).ajaxComplete(function(e, xhr, options){
    					submit_butt.show();
    					submit_butt.removeAttr('disabled');
    					submit_butt.parent().find('.ajax-submit-gif').remove();
    					
    					jQuery(e.currentTarget).unbind('ajaxComplete');
    				});
    			});	
    

    My one suggest, and why I was looking for an alternative, is that as is now, if you have other ajax processes going on in the window, then they may trigger ajaxComplete in this code.

    @godavid33,@henrywright

    I brought the loading function back in one of the theme am building by using just css.

    1, I added ajax spinner

    2, I changed the button background while loading to make it look disabled.

    below is an example for the post button:

    #buddypress #whats-new-form a.loading,
    #buddypress #whats-new-form input.loading {
    padding-right: 25px ! important;
    background-color:#bbb ! important;
    background-image:url(“/wp-content/themes/your-theme/img/ajax-loader.gif” ) ! important;
    background-position: 93% 50% ! important;
    background-repeat: no-repeat ! important;
    }

    using #buddypress a.loading{} will affect almost all the button.

    Naijaping

    Avatar of godavid33
    godavid33
    Participant

    @godavid33

    Nice, much more elegant @naijaping

    Avatar of henrywright
    henrywright
    Participant

    @henrywright

    @godavid33 and @naijaping – whilst on the subject of preloaders – check out this resource http://ilovepreloaders.tumblr.com/ – I’ve found it V useful in the past

    Avatar of godavid33
    godavid33
    Participant

    @godavid33

    Yo these are great. Love the rainbox and the ouroboro

Viewing 7 replies - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.