Compare commits

...

2 Commits

Author SHA1 Message Date
sharevb
06ec9e917e
Merge 78084e6bef into 76a19d218d 2024-07-14 10:49:05 +02:00
sharevb
76a19d218d
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
2024-07-11 17:06:17 +02:00
2 changed files with 23 additions and 1 deletions

View File

@ -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;

View File

@ -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,