From 76a19d218da1599a528a71d97baaa1aef29f8ed5 Mon Sep 17 00:00:00 2001
From: sharevb <sharevb@gmail.com>
Date: Thu, 11 Jul 2024 17:06:17 +0200
Subject: [PATCH] fix(emoji-picker): debounced search input (#1181)

* fix(Emoji picker): fix lags

Fix #1176 using debounced ref

* chore: fix strange corepack message

Fix corepack claiming strange thing : UsageError: This project is configured to use yarn because /home/runner/work/it-tools/it-tools/package.json has a "packageManager" field
---
 package.json                            |  3 ++-
 src/composable/debouncedref.ts          | 21 +++++++++++++++++++++
 src/tools/emoji-picker/emoji-picker.vue |  3 ++-
 3 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 src/composable/debouncedref.ts

diff --git a/package.json b/package.json
index c6cb7757..d1e6e458 100644
--- a/package.json
+++ b/package.json
@@ -138,5 +138,6 @@
     "vitest": "^0.34.0",
     "workbox-window": "^7.0.0",
     "zx": "^7.2.1"
-  }
+  },
+  "packageManager": "pnpm@8.15.3"
 }
diff --git a/src/composable/debouncedref.ts b/src/composable/debouncedref.ts
new file mode 100644
index 00000000..09dd10e9
--- /dev/null
+++ b/src/composable/debouncedref.ts
@@ -0,0 +1,21 @@
+import _ from 'lodash';
+
+function useDebouncedRef<T>(initialValue: T, delay: number, immediate: boolean = false) {
+  const state = ref(initialValue);
+  const debouncedRef = customRef((track, trigger) => ({
+    get() {
+      track();
+      return state.value;
+    },
+    set: _.debounce(
+      (value) => {
+        state.value = value;
+        trigger();
+      },
+      delay,
+      { leading: immediate },
+    ),
+  }));
+  return debouncedRef;
+}
+export default useDebouncedRef;
diff --git a/src/tools/emoji-picker/emoji-picker.vue b/src/tools/emoji-picker/emoji-picker.vue
index 750695f5..a12b10c2 100644
--- a/src/tools/emoji-picker/emoji-picker.vue
+++ b/src/tools/emoji-picker/emoji-picker.vue
@@ -4,6 +4,7 @@ import emojiKeywords from 'emojilib';
 import _ from 'lodash';
 import type { EmojiInfo } from './emoji.types';
 import { useFuzzySearch } from '@/composable/fuzzySearch';
+import useDebouncedRef from '@/composable/debouncedref';
 
 const escapeUnicode = ({ emoji }: { emoji: string }) => emoji.split('').map(unit => `\\u${unit.charCodeAt(0).toString(16).padStart(4, '0')}`).join('');
 const getEmojiCodePoints = ({ emoji }: { emoji: string }) => emoji.codePointAt(0) ? `0x${emoji.codePointAt(0)?.toString(16)}` : undefined;
@@ -23,7 +24,7 @@ const emojisGroups: { emojiInfos: EmojiInfo[]; group: string }[] = _
   .map((emojiInfos, group) => ({ group, emojiInfos }))
   .value();
 
-const searchQuery = ref('');
+const searchQuery = useDebouncedRef('', 500);
 
 const { searchResult } = useFuzzySearch({
   search: searchQuery,