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,42 +55,55 @@ const setupChatboxEvents = (socket) => {
       selected = button;
       button.classList.add("selected");
     };
-    emojiAutocomplete.append(
+    let results = await findEmojis(search);
-      ...(await findEmojis(search)).map(([name, replaceWith, ext], i) => {
+    let yieldAt = performance.now() + 13;
-        const button = Object.assign(document.createElement("button"), {
+    for (let i = 0; i < results.length; i += 100) {
-          className: "emoji-option",
+      emojiAutocomplete.append.apply(
-          onmousedown: (e) => e.preventDefault(),
+        emojiAutocomplete,
-          onclick: () => {
+        results.slice(i, i + 100).map(([name, replaceWith, ext], i) => {
-            messageInput.value = prefix + replaceWith + " " + suffix;
+          const button = Object.assign(document.createElement("button"), {
-            setCaretPosition(messageInput, (prefix + " " + replaceWith).length);
+            className: "emoji-option",
-          },
+            onmousedown: (e) => e.preventDefault(),
-          onmouseover: () => select(button),
+            onclick: () => {
-          onfocus: () => select(button),
+              messageInput.value = prefix + replaceWith + " " + suffix;
-          type: "button",
+              setCaretPosition(
-          title: name,
+                messageInput,
-        });
+                (prefix + " " + replaceWith).length
-        button.append(
+              );
-          replaceWith[0] !== ":"
+            },
-            ? Object.assign(document.createElement("span"), {
+            onmouseover: () => select(button),
-                textContent: replaceWith,
+            onfocus: () => select(button),
-                className: "emoji",
+            type: "button",
-              })
+            title: name,
-            : Object.assign(new Image(), {
+          });
-                loading: "lazy",
+          button.append(
-                src: `/emojis/${name}${ext}`,
+            replaceWith[0] !== ":"
-                className: "emoji",
+              ? Object.assign(document.createElement("span"), {
-              }),
+                  textContent: replaceWith,
-          Object.assign(document.createElement("span"), {
+                  className: "emoji",
-            textContent: name,
+                })
-            className: "emoji-name",
+              : Object.assign(new Image(), {
-          })
+                  loading: "lazy",
-        );
+                  src: `/emojis/${name}${ext}`,
-        return button;
+                  className: "emoji",
-      })
+                }),
-    );
+            Object.assign(document.createElement("span"), {
-    if (emojiAutocomplete.children[0]) {
+              textContent: name,
-      emojiAutocomplete.children[0].scrollIntoView();
+              className: "emoji-name",
-      select(emojiAutocomplete.children[0]);
+            })
+          );
+          return button;
+        })
+      );
+      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;
   }