Skip to:
Content
Pages
Categories
Search
Top
Bottom

Feature Request: Ajax loading spinner

  • Profile photo 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)
  • Profile photo 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.

    Profile photo of Henry Wright
    Henry Wright
    Moderator

    @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?

    Profile photo 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.

    Profile photo of Prince Abiola Ogundipe
    Prince Abiola Ogundipe
    Participant

    @naijaping

    @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

    Profile photo of godavid33
    godavid33
    Participant

    @godavid33

    Nice, much more elegant @naijaping

    Profile photo of Henry Wright
    Henry Wright
    Moderator

    @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

    Profile photo of godavid33
    godavid33
    Participant

    @godavid33

    Yo these are great. Love the rainbox and the ouroboro

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Feature Request: Ajax loading spinner’ is closed to new replies.
Skip to toolbar