Merge branch 'main' of lavender.software:lavender/watch-party

frontend/lib/chat.mjs

@@ -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,21 @@ const setupChatboxEvents = (socket) => {
       selected = button;
       button.classList.add("selected");
     };
-    emojiAutocomplete.append(
-      ...(await findEmojis(search)).map(([name, replaceWith, ext], i) => {
+    let results = await findEmojis(search);
+    let yieldAt = performance.now() + 13;
+    for (let i = 0; i < results.length; i += 100) {
+      emojiAutocomplete.append.apply(
+        emojiAutocomplete,
+        results.slice(i, i + 100).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 +95,16 @@ const setupChatboxEvents = (socket) => {
           return button;
         })
       );
-    if (emojiAutocomplete.children[0]) {
+      if (i == 0 && emojiAutocomplete.children[0]) {
         emojiAutocomplete.children[0].scrollIntoView();
         select(emojiAutocomplete.children[0]);
       }
+      const now = performance.now();
+      if (now > yieldAt) {
+        yieldAt = now + 13;
+        await new Promise((cb) => setTimeout(cb, 0));
+      }
+    }
     autocompleting = false;
   }
   messageInput.addEventListener("input", () => autocomplete());