phpforeachtinymcetextareapage-load-time

Tinymce sink element decreases page loading time


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?


Solution

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