yield between appending 100 item chunks

This commit is contained in:
easrng 2022-02-18 14:04:55 -05:00
parent a6a856c6a5
commit 7b1defe010
1 changed files with 45 additions and 37 deletions

View File

@ -45,7 +45,7 @@ const setupChatboxEvents = (socket) => {
const search = text.slice(match.index + 1);
if (search.length < 1 && !fromListTimeout) {
autocompleting = false;
showListTimer = setTimeout(() => autocomplete(true), 1000);
showListTimer = setTimeout(() => autocomplete(true), 500);
return;
}
const suffix = messageInput.value.slice(messageInput.selectionStart);
@ -55,14 +55,20 @@ const setupChatboxEvents = (socket) => {
selected = button;
button.classList.add("selected");
};
emojiAutocomplete.append(
...(await findEmojis(search)).map(([name, replaceWith, ext], i) => {
let results = await findEmojis(search);
for (let i = 0; i < results.length; i += 100) {
emojiAutocomplete.append.apply(
emojiAutocomplete,
results.slice(i, i + 1000).map(([name, replaceWith, ext], i) => {
const button = Object.assign(document.createElement("button"), {
className: "emoji-option",
onmousedown: (e) => e.preventDefault(),
onclick: () => {
messageInput.value = prefix + replaceWith + " " + suffix;
setCaretPosition(messageInput, (prefix + " " + replaceWith).length);
setCaretPosition(
messageInput,
(prefix + " " + replaceWith).length
);
},
onmouseover: () => select(button),
onfocus: () => select(button),
@ -88,10 +94,12 @@ const setupChatboxEvents = (socket) => {
return button;
})
);
if (emojiAutocomplete.children[0]) {
if (i == 0 && emojiAutocomplete.children[0]) {
emojiAutocomplete.children[0].scrollIntoView();
select(emojiAutocomplete.children[0]);
}
await new Promise((cb) => setTimeout(cb, 0));
}
autocompleting = false;
}
messageInput.addEventListener("input", () => autocomplete());