[Solved] Better UX after submitting a comment (AJAX loading)

Tip: You can activate live-update, so they see their posts directly after posting.

@bastbra Thanks for the tip, although it's not solving my problem totally and might increase server load (and usually live-update is disabled for guests). So I'm still looking for option to customize submitting process, at least by making icon/animation visible (or/and make form disabled for the time of submission)

@mayuxi,

Thank you for this suggestion. It'll be taken into consideration for future updates. 

Here is my suggestion you can implement. 

The following CSS code will allow you to move the loading bar to the center of the page. 

.wpdiscuz-loading-bar-auth {
   top: 50%;
   left: 50%;
}

The CSS code above will allow you to change the width, height and the color of the element:

#wpdiscuz-loading-bar.wpdiscuz-loading-bar:before {
   width: 5px;
   height: 6px;
   background: #888;
}

Please change the red marked code before using.

The CSS codes should be added in "Custom CSS Code" textarea, located in the Dashboard > Comments > Settings > Styling admin page. 

Important:  Don't forget to delete all caches if you make some changes. 

@astghik

Thanks, great suggestion, already can make the submitting process more visible. Is there any way to change loading icon/animation to something else (like default loading circle) and disable comment form during the submission?

@mayuxi

The easy solution I can provide you is the following CSS code. This code also must be added in "Custom CSS Code" textarea. 

#wpdiscuz-loading-bar.wpdiscuz-loading-bar:before {
  display:none !important;
}
.wpdiscuz-loading-bar-auth {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  top: 50%;
  left: 50%;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Based on this Code you can make the customization you'd prefer. You can change the border, width height, etc. 

If you decide to use this code you can remove the previous code I've provided.

Thanks, that's a great solution!

Welcome @mayuxi

We'd really appreciate and be thankful if you leave a good review on plugin page. This is the best way to say thank you to this project and support team.