For a blog file, all the comments on the articles, created by a php foreach loop, have each their own Reply
button what opens a modal dialog with tinymce in the textarea.
A noticed, when there are may comments, the page loading takes some time. When i looked in the brower-inspector, i see at the end tiny is loading for each textarea a "sink" element just before the close tag of the body
:
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
....and so on...
The loading of these divs takes some time and it decreases the performance of the page loading. Is there anything i can do about this to increase the performance of page loading?
As KIKO said, you need to have a single reply modal for all comments. Since you didn't specify what platform you're using, here's a general approach.
Each reply button should have a data attribute with the ID of the comment you want to reply to. For example
<button class="reply-button" data-comment-id="<?php echo $comment->id; ?>">Reply</button>
Or leave the data-comment-id
attribute empty if the comment is going to be attached to the post, and not as a reply to some other comment.
If you're showing multiple blog posts on a single page and want each to have their own reply button, just add data attribute post-id
, like so:
<button class="reply-button" data-post-id="<?php echo $blog_post->id; ?>">Reply</button>
Use JavaScript to open comment modal and pick up the appropriate data attribute. For example:
$('.reply-button').on('click', function() {
const commentId = $(this).data('comment-id');
const postId = $(this).data('post-id');
showCommentModal(commentId, postId);
});
showCommentModal
function should show the single modal you have on the page. Using commentId
and postId
it should prepare to post the comment either as a reply to another comment or to a blog post.