From ed8e346ff9c3fb5a6b331e211e0b0e00c2d20dd8 Mon Sep 17 00:00:00 2001
From: Chloe Kudryavtsev <code@toast.bunkerlabs.net>
Date: Thu, 1 Sep 2022 13:38:07 -0400
Subject: [PATCH] client: delay/batch emoji picker searches

This is particularly important for users that set limit to 0 (unlimited).
---
 packages/client/src/components/emoji-picker.vue | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue
index 567715f16..270a83975 100644
--- a/packages/client/src/components/emoji-picker.vue
+++ b/packages/client/src/components/emoji-picker.vue
@@ -142,8 +142,18 @@ function emojiSearch<Type>(src: Type[], max: number, query: string): Type[] {
 	return matches.slice(0, max);
 }
 
-watch(q, () => {
+let queryTimeoutId = -1;
+const queryCallback = (query) => {
 	if (emojis.value) emojis.value.scrollTop = 0;
+	searchResultCustom.value = emojiSearch(instance.emojis, maxCustomEmojiPicker.value, query);
+	searchResultUnicode.value = emojiSearch(emojilist, maxUnicodeEmojiPicker.value, query);
+	queryTimeoutId = -1;
+}
+watch(q, () => {
+	if(queryTimeoutId >= 0) {
+		clearTimeout(queryTimeoutId);
+		queryTimeoutId = -1;
+	}
 
 	const query = q.value;
 	if (query == null || query === '') {
@@ -151,9 +161,8 @@ watch(q, () => {
 		searchResultUnicode.value = [];
 		return;
 	}
-	
-	searchResultCustom.value = emojiSearch(instance.emojis, maxCustomEmojiPicker.value, query);
-	searchResultUnicode.value = emojiSearch(emojilist, maxUnicodeEmojiPicker.value, query);
+
+	queryTimeoutId = setTimeout(queryCallback, 300, query);
 });
 
 function focus() {