emoji-button | Vanilla JavaScript emoji picker component | Icon library

I am trying to get something working using the emoji button code from https://github.com/joeattardi/emoji-button

Using advice from the developer of the code (https://github.com/joeattardi/emoji-button/issues/58) I have been shown how to call the emoji picker from a button, which works as per this example:

https://codepen.io/thinksInCode/pen/YzymeoM

I have 6 tabs on a page, all with a textarea. For each textarea I would like to add an emoji-button that when clicked, opens an emoji dictionary, the user selects one and it appends the text in the relevant textarea.

I am using https://emoji-button.js.org/ and can get it working for one emoji button on one textarea using the following:

HTML:

I have simple button like that:

I've looked on several questions, but none seem to solve my problem. The project needs to open a list of emojis inside a div (modal). So when the users press the emoji button, a modal with emojis will appear. If we list hundreds of emojis, then this is almost instantly done. If we put thousands of emojis, then it takes several seconds to load the modal.

I've provided a snippet with a demo array of emojis. Tried classic for approach and also createDocumentFragment (inspired from here), both of them having the same effect.

Looking for a solution that can render emojis one at a time, like in a queue. I know that I can push the DOM element in the queue and when it is loaded I can shift to the next element. The only thing is that I do not know when content.appendChild(button) or fragment.appendChild(button) is displayed. I've read that you can use setTimeout function, but I do not know what time to set or if it is recommended in this case.

Thank you!