Notifications
Clear all

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

8 Posts
3 Users
0 Reactions
2,327 Views
(@mayuxi)
Active Member
Joined: 6 years ago
Posts: 13
Topic starter  

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!


   
(@bastbra)
Member Customer
Joined: 6 years ago
Posts: 104
 

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


   
(@mayuxi)
Active Member
Joined: 6 years ago
Posts: 13
Topic starter  

@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
(@astgh)
Illustrious Member Admin
Joined: 7 years ago
Posts: 6098
 

@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)
Active Member
Joined: 6 years ago
Posts: 13
Topic starter  

@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
(@astgh)
Illustrious Member Admin
Joined: 7 years ago
Posts: 6098
 

@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)
Active Member
Joined: 6 years ago
Posts: 13
Topic starter  

Thanks, that's a great solution!


   
Astghik
(@astgh)
Illustrious Member Admin
Joined: 7 years ago
Posts: 6098
 

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:
Scroll to top