Notifications

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

  RSS

mayuxi
(@mayuxi)
Active Member
Joined: 1 year ago
Posts: 13
06/08/2019 8:17 am  

Thanks again for amazing comment plugin, guys! Really liked it and I use it on my various wp-based projects. I found out a common problem, reported by many users. When they submit a comment via wpDiscuz, many of them don’t see the ajax-loader icon (animation) in the right top corner. So they don’t know if the comment form working, submitting or not. Some of them give up, some of them try to send it many times, before realize it’s been posted already.

Is there any way to improve this? Like making the form in disabled state, or making animation icon more visible?

Or any suggestion for customize this? Thanks!


Topic Tags
Bastbra
(@bastbra)
Member Customer
Joined: 1 year ago
Posts: 84
06/08/2019 11:39 am  

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


mayuxi
(@mayuxi)
Active Member
Joined: 1 year ago
Posts: 13
06/08/2019 1:21 pm  

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


Astghik
(@astghik)
Support Team Admin
Joined: 2 years ago
Posts: 3563
06/08/2019 1:54 pm  

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


mayuxi
(@mayuxi)
Active Member
Joined: 1 year ago
Posts: 13
07/08/2019 10:51 am  

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


Astghik
(@astghik)
Support Team Admin
Joined: 2 years ago
Posts: 3563
07/08/2019 12:41 pm  

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


mayuxi
(@mayuxi)
Active Member
Joined: 1 year ago
Posts: 13
07/08/2019 5:43 pm  

Thanks, that's a great solution!


Astghik
(@astghik)
Support Team Admin
Joined: 2 years ago
Posts: 3563
07/08/2019 5:45 pm  

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.


Share: