How to show loading.gif on submit button and hide after load?

Question

I'm wondering if anyone could help. I'm trying to add a loading.gif to a submit button then make it hide after the content is submitted. Here's the template for the page,

<div class="userpro userpro-users userpro-<?php echo $i; ?> userpro-<?php echo $layout; ?>" <?php userpro_args_to_data( $args ); ?>>

<div class="title"><?php

echo userpro_userwall_get_option( 'title' );

?>
</div>
</div>  
<div id="loading" style="display:none; text-align: center;"><img src="http://stolenmx.com/wp-    content/themes/load.gif" width="40px" height="40px" alt="Please Wait" /></div>
<div class="textarea"><textarea placeholder="<?php _e('Update Status...','userpro-userwall');?>"  id=userpost name="userpost"cols="50" rows="2" style="border: 1px solid #ccc;border-radius: 5px;width:  100%;"></textarea></div>
<div class="buttonpost"><button id="but1" type="submit"  name="Post_Now" value="Post Now" title="    <?php _e('Add to Wall','userpro-userwall'); ?>" onclick="user_post_data('userpost',<?php echo     get_current_user_id();?>); $('#loading').show();"><i class="fa fa-send fa-fw"></i><b><?php _e('Add to     Wall','userpro-userwall');?></b></button></div>

<div class="upload"><button id="but2" class=userwall_upload  data-filetype = 'photo'  type="submit"  name="upload_image" value="upload" data-allowed_extensions=jpg,png,jpeg,gif title="<?  php _e('Upload','userpro-userwall'); ?>"><i class="fa fa-image fa-fw"></i> <b><?php _e('Add  Photos','userpro-userwall');?></b></button></div>
<div id="userwalldata">
<?php
$args = array(
'posts_per_page'   => userpro_userwall_get_option( 'totalpost' ),
'order'            => 'DESC',
'include'          => '',
'exclude'          => '',
'meta_key'         => '',
'meta_value'       => '',
'post_type'        => 'userpro_userwall',
'post_mime_type'   => '',
'post_parent'      => '',
'post_status'      => 'publish',
'suppress_filters' => true ); 

$postslist = get_posts( $args );

foreach($postslist as $post)
{

global $userpro;
$user_id = get_post_meta( $post->ID,'user_id');

?>
<div class="userwall" id=<?php echo $post->ID?>>


<?php if($user_id[0]==get_current_user_id()) {?>
<div class="userwall_delete_post">
<button type="submit"  name="delete" value="delete" title="<?php _e('Delete','userpro-userwall');   ?>" onclick="userwall_delete_post(<?php echo $post->ID;?>);"><i class="fa fa-trash fa-fw"></i>     </button>
</div>
<?php }?>
<div class="userwall-post-content-img" data-key="profilepicture"><a  href="<?php echo $userpro-   >permalink($user_id[0]); ?>" title="<?php _e('View Profile','userpro'); ?>" ><?php echo get_avatar(   $user_id[0], "60" );  ?> </a></div> 

<div class="userwall-post-content">
            <div class="displayname"><a href="<?php echo $userpro->permalink($user_id[0]); ?>"><?  php echo userpro_profile_data('display_name', $user_id[0]); ?></a>
<?php $timestamp = strtotime($post->post_date); 
$new_date = date('d-M-Y h:i', $timestamp);?>
            <div class="post-date"><?php echo "Posted On ".$new_date;?></div>       </div>
<br>

<br>
<?php 

if($post->post_title=="imgpost")
echo '<img src="'.$post->post_content.'" width="auto" style="-moz-user-select: none;
border-radius: 10px;max-width:99%">';
else
{
echo $post->post_content;
}
?>
</div>
<div class="userwall-comment-data-<?php echo $post->ID;?>" id="userwall-comment" >
<?php 
$comments = get_post_meta($post->ID,'user_comment');

foreach($comments as $comment)
{

?>
<div class="userwall_comment_data" id="<?php echo $i ?>"><?php
if($comment['comment_userid']==get_current_user_id()) {
    ?><div class=userwall_delete_comment>
    <button type="submit"  name="delete" value="delete" title="<?php _e('Delete','userpro-  userwall'); ?>" onclick="userwall_delete_comment('<?php echo $post->ID;?>','<?php echo    $comment['comment_content'];?>',this);"><i class="fa fa-trash fa-fw-3"></i> </button></div>
<?php
}?><div class="userwall-comment-content-img" data-key="profilepicture"><a  href="<?php echo     $userpro->permalink($comment['comment_userid']); ?>" title="<?php _e('View Profile','userpro'); ?>" >  <?php echo get_avatar( $comment['comment_userid'], "40" );  ?> </a></div> 


<div class="userwall-post-content"><div class="displayname"><a href="<?php echo $userpro- >permalink($comment['comment_userid']); ?>"><?php echo userpro_profile_data('display_name',  $comment['comment_userid']); ?></a></div>

<?php 
$commenttimestamp = strtotime($comment['comment_date']);
$commenttime = date('d-M-Y', $commenttimestamp);?>
<div class="post-date"><?php echo "Commented On ".$commenttime;?></div><?php
echo "<br><p>".$comment['comment_content']."</p>";



echo "</div></div>";

}

?>
</div>
<div class="commenttext">
<a href="<?php echo $userpro->permalink(get_current_user_id()); ?>" title="<?php _e('View  Profile','userpro'); ?>"><?php echo get_avatar( get_current_user_id(), "40" );  ?></a>
<textarea id=userwall-comment-<?php echo $post->ID;?> placeholder="<?php _e('Write your reply and    hit enter...','userpro-userwall');?>"  onkeypress="user_post_comment('userwall-comment',<?php echo    get_current_user_id();?>,<?php  echo $post->ID;?>,event);" name="userwall-comment"cols="40" rows="1"   style="border: 1px solid #ccc;+border-radius: 6px;margin: 0px 0px 0px -5px;max- width:100%;width:445px;height:46px;margin-top: 6px;"></textarea>
</div>

</div>

<?php 


}

?>
</div>
<?php
global $wp_query,$wpdb;
$curauth = $wp_query->get_queried_object();
$post_count = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_type = 'userpro_userwall'     AND post_status = 'publish'");
if($post_count>=userpro_userwall_get_option( 'totalpost' ))
{
?>

<div class="socialwall-load-more" id="socialwall-load-more" data-max-pages="<?php  echo   userpro_userwall_get_option( 'totalpost' ) ?>"><span><?php _e('Load More','userpro-userwall')?>    </span></div>
<?php }?>

Here's what I have so far,

<div id="loading" style="display:none; text-align: center;"><img src="http://stolenmx.com/wp-    content/themes/load.gif" width="40px" height="40px" alt="Please Wait" /></div>

<div class="buttonpost"><button id="but1" type="submit"  name="Post_Now" value="Post Now" title="    <?php _e('Add to Wall','userpro-userwall'); ?>" onclick="user_post_data('userpost',<?php echo     get_current_user_id();?>); $('#loading').show();">

The loading.gif loads after entering content and pressing the button but it never hides after the content loads. Could anyone help out with a solution? Thanks

UPDATE:

Front end html,

<div class="post">


                                <h1 class="single dotted">Social Wall</h1>



                                <div class="userpro userpro-users userpro-607 userpro-float"     data-modal_profile_saved="Your profile has been saved!" data-template="socialwall" data- max_width="480px" data-uploads_dir="http://stolenmx.com/wp-content/uploads/userpro/" data- default_avatar_male="http://stolenmx.com/wp-content/plugins/userpro/img/default_avatar_male.jpg"  data-default_avatar_female="http://stolenmx.com/wp- content/plugins/userpro/img/default_avatar_female.jpg" data-layout="float" data-margin_top="0" data- margin_bottom="30px" data-align="center" data-skin="blue" data-required_text="This field is required"  data-password_too_short="Your password is too short" data-passwords_do_not_match="Passwords do not  match" data-password_not_strong="Password is not strong enough" data-keep_one_section_open="0" data- allow_sections="1" data-permalink="http://stolenmx.com/social-wall/" data-field_icons="1" data- profile_thumb_size="80" data-register_heading="Register an Account" data-register_side="Already a  member?" data-register_side_action="login" data-register_button_action="login" data- register_button_primary="Register" data-register_button_secondary="Login" data- register_group="default" data-register_redirect="0" data-type="0" data-login_heading="Login" data- login_side="Forgot your password?" data-login_side_action="reset" data-login_button_action="register"  data-login_button_primary="Login" data-login_button_secondary="Create an Account" data- login_group="default" data-login_redirect="0" data-rememberme="true" data-delete_heading="Delete  Profile" data-delete_side="Undo, back to profile" data-delete_side_action="view" data- delete_button_action="view" data-delete_button_primary="Confirm Deletion" data- delete_button_secondary="Back to Profile" data-delete_group="default" data-reset_heading="Reset  Password" data-reset_side="Back to Login" data-reset_side_action="login" data- reset_button_action="change" data-reset_button_primary="Request Secret Key" data- reset_button_secondary="Change your Password" data-reset_group="default" data-change_heading="Change  your Password" data-change_side="Request New Key" data-change_side_action="reset" data- change_button_action="reset" data-change_button_primary="Change my Password" data- change_button_secondary="Do not have a secret key?" data-change_group="default" data- list_heading="Latest Members" data-list_per_page="5" data-list_sortby="registered" data- list_order="desc" data-list_users="0" data-list_group="default" data-list_thumb="50" data- list_showthumb="1" data-list_showsocial="1" data-list_showbio="0" data-list_verified="0" data- list_relation="or" data-online_heading="Who is online now" data-online_thumb="30" data-online_showthumb="1" data-online_showsocial="0" data-online_showbio="0" data-online_mini="1" data- online_mode="vertical" data-edit_button_primary="Save Changes" data-edit_group="default" data-view_group="default" data-social_target="_blank" data-social_group="default" data-card_width="250px" data-card_img_width="250" data-card_showbio="1" data-card_showsocial="1" data-link_target="_blank" data-error_heading="An error has occured" data-memberlist_table="0" data-memberlist_table_columns="user_id,picture,name,country,gender,role,email_user,message_user" data-show_on_mobile="picture,name,country,email_user,message_user" data-memberlist_v2="1" data-memberlist_v2_pic_size="86" data-memberlist_v2_fields="age,gender,country" data-memberlist_v2_bio="1" data-memberlist_v2_showbadges="1" data-memberlist_v2_showname="1" data-memberlist_v2_showsocial="1" data-memberlist_pic_size="120" data-memberlist_pic_topspace="15" data-memberlist_pic_sidespace="30" data-memberlist_pic_rounded="1" data-memberlist_width="100%" data-memberlist_paginate="1" data-memberlist_paginate_top="1" data-memberlist_paginate_bottom="1" data-memberlist_show_name="1" data-memberlist_popup_view="0" data-memberlist_withavatar="0" data-memberlist_verified="0" data-memberlist_filters="0" data-memberlist_default_search="1" data-per_page="12" data-sortby="registered" data-order="desc" data-relation="and" data-search="1" data-exclude="0" data-show_social="1" data-registration_closed_side="Existing member? login" data-registration_closed_side_action="login" data-facebook_redirect="profile" data-logout_redirect="0" data-post_paginate="1" data-postsbyuser_num="12" data-postsbyuser_types="post" data-postsbyuser_mode="grid" data-postsbyuser_thumb="50" data-postsbyuser_showthumb="1" data-postsbyuser_taxonomy="category" data-postsbyuser_category="0" data-following_per_page="4" data-following_paginate="1" data-followers_per_page="4" data-followers_paginate="1" data-publish_heading="Add a New Post" data-publish_button_primary="Publish" data-history_public="0" data-history_title="Points History" data-history_type="mycred_default" data-history_number="10" data-badges_public="0" data-badges_title="Earned Badges" data-following_heading="Following" data-followers_heading="Followers" data-activity_heading="Recent Activity" data-activity_all="0" data-activity_per_page="10" data-activity_side="refresh" data-activity_user="0" data-emd_filters="1" data-emd_thumb="200" data-emd_social="1" data-emd_bio="1" data-emd_fields="first_name,last_name,gender,country" data-emd_layout="masonry" data-emd_per_page="20" data-emd_col_width="22%" data-emd_col_margin="2%" data-emd_accountstatus="Search by account status" data-emd_photopreference="Photo Preference" data-emd_country="Search by Country,dropdown" data-emd_gender="Gender,radio" data-emd_paginate="1" data-emd_paginate_top="1" data-i="607">

<div class="title">Social Wall </div>
</div>  
<div id="loading" style="text-align: center;"><img src="http://stolenmx.com/wp-  content/themes/load.gif" width="40px" height="40px" alt="Please Wait"></div>
<div class="textarea"><textarea placeholder="Update Status..." id="userpost" name="userpost"  cols="50" rows="2" style="border: 1px solid #ccc;border-radius: 5px;width: 100%;"></textarea></div>
<div class="buttonpost"><button id="but1" type="submit" name="Post_Now" value="Post Now"   title="Add to Wall" onclick="user_post_data('userpost',1); $('#loading').show();"><i class="fa fa-  send fa-fw"></i><b>Add to Wall</b></button></div>

<div class="upload"><button id="but2" class="userwall_upload ajax-file-upload" data-  filetype="photo" type="submit" name="upload_image" value="upload" data- allowed_extensions="jpg,png,jpeg,gif" title="Upload"><i class="fa fa-image fa-fw"></i> <b>Add  Photos</b></button></div>
<div id="userwalldata"><div class="userwall" id="291"><div class="userwall_delete_post">
<button type="submit" name="delete" value="delete" onclick="userwall_delete_post( 291);"><i  class="fa fa-trash fa-fw"></i> </button>
</div><div class="userwall-post-content-img" data-key="profilepicture"><a  href="http://stolenmx.com/profile/Admin/" title="_e('View Profile','userpro')"> <img  src="http://stolenmx.com/wp-content/uploads/bfi_thumb/5491a01f194c6- 1p9lseef4jgdq3ff9ccn4ooisj0hpjvp3pg9zukt8e6c.jpg" width="60" height="60" alt="" class="modified  avatar"></a> </div>
    <div class="userwall-post-content"><div class="displayname"><a  href="http://stolenmx.com/profile/Admin/"> Luke Day</a> <div class="post-date">Posted On 20-Dec-2014  10:14</div></div><br><br>test</div> <div class="userwall-comment-data-291" id="userwall-comment"> </div><div class="commenttext"> <a href="http://stolenmx.com/profile/Admin/" title="_e('View  Profile','userpro')"> <img src="http://stolenmx.com/wp-content/uploads/bfi_thumb/5491a01f194c6- 1p9lseef3v39xf7c2o2dtaexxa9pgyoktbse8fkrnxk4.jpg" width="40" height="40" alt="" class="modified  avatar"></a><a href="http://stolenmx.com/profile/Admin/"> Luke Day</a>
<textarea id="userwall-comment-291" onkeypress="user_post_comment('userwall- comment',1,291,event);" name="userwall-comment" cols="40" rows="1" style="border:solid 1px black;max- width: 100%;"></textarea></div></div>
</div>


<style type="text/css">

div.userpro-awsm-pic {
margin-left: -48px;
top: -48px;
}

div.userpro-awsm-pic img {
width: 86px;
height: 86px;
}

div.userpro,
div.emd-main,
div.emd-filters,
div.userpro-search-results,
div.userpro-label label,
div.userpro input,
div.userpro textarea,
div.userpro select,
div.userpro-field textarea.userpro_editor,
div.userpro-msg-overlay-content,
div.userpro-msg-overlay-content input,
div.userpro-msg-overlay-content textarea,
div.userpro-notifier
{
font-family: Roboto;
}


div.userpro-607 {
max-width: 480px;
            margin-left: auto;margin-right: auto;
            margin-bottom: 30px;
}



div.userpro-607.userpro-nostyle {
max-width: 250px;
}

div.userpro-607.userpro-users {
max-width: 100% !important;
}

div.userpro-607 div.userpro-user {
margin-top: 15px;
margin-left: 30px;
margin-right: 30px;
}

div.userpro-607 div.userpro-user a.userpro-user-img {
width: 120px;
height: 120px;
}
div.userpro-607 div.userpro-user a.userpro-user-img span {
top: -120px;
line-height: 120px;
}

div.userpro-607 div.userpro-user div.userpro-user-link {
width: 120px;
}

div.userpro-607 div.userpro-user a.userpro-user-img,
div.userpro-607 div.userpro-user a.userpro-user-img span {
border-radius: 999px !important;
}

div.userpro-607 div.userpro-list-item-i {
width: 50px;
height: 50px;
}


div.userpro-607 div.userpro-online-item-i {
width: 30px;
height: 30px;
}

div.userpro-607 div.userpro-online-item {
border-bottom: 0px !important;
padding: 10px 0 0 0;
}

div.userpro-607 div.userpro-online-item img.userpro-profile-badge,
div.userpro-607 div.userpro-online-item img.userpro-profile-badge-right {
max-width: 14px !important;
max-height: 14px !important;
}

div.userpro-607 div.userpro-profile-img {
width: 80px;
height: 80px;
}

div.emd-user {
width: 22%;
margin-left: 2% !important;
}




</style>


                                <div class="prdetails">
                                </p></div>

                            </div>

Answer 1

i have one solution if your using ajax...

if you are doing something like calling ajax 
then right on button click  
this code
$('#loading').show(); or $('#loading').html('<img src="images/loading.gif">'); loading...');

and after competing process getting result from ajax hide that div

    $('#loading').hide(); or $('#loading').html();
or

if you are not using ajax then on your button click your calling user_post_data function that returning data so before this call

$('#loading').show();

and after getting data from function hide this div

Answer 2

A check for the content length of that particular div could help you. But i don't know if it shows previous posts of the user. then you should compare old content length before the button click and the new one after the button click.

var content = $('.userwall-post-content').html();
var len1 = content.length;
$('#but1').on('touchstart click',function() {
$('#loading').show();
var len2 = content.length;
if (len2.length > len1.length) {
$('#loading').hide();
}
});

Answer 3

When the user clicks the button, you could check for the presence the textarea inside of the div (which would indicate that the content has loaded). If it's not there, you could repeat that check every half a second, for a period of ten seconds (for example). As soon as the content shows up, you can hide your spinner. If it doesn't show up after that, then presumably something has gone wrong.

Something like:

var i;
function isPresent(){
  if($(selector).length){
    hideSpinner();
    clearInterval(i);
  }
}

function hideSpinner(){
  $(spinner).remove();
}

$("button").on("click", function(){
  this.disabled = true;

  if(isPresent()){
    hideSpinner();
  } else {
    i = setInterval(isPresent, 500);
    setTimeOut(function(){ clearInterval(i); }, 10000);
  }
});