From 66b59bfb6c391878612c20e47c0fe2b1cde5e185 Mon Sep 17 00:00:00 2001 From: Kylan Hurt Date: Tue, 5 Dec 2023 18:39:12 -0300 Subject: [PATCH 1/5] Debounce header search input --- src/components/HeaderSearch.vue | 10 ++++++++-- src/utils/string-utils.ts | 16 ++++++++++++++++ 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/components/HeaderSearch.vue b/src/components/HeaderSearch.vue index 7d886a6e..fd8d69ac 100644 --- a/src/components/HeaderSearch.vue +++ b/src/components/HeaderSearch.vue @@ -5,6 +5,7 @@ import { OptionsObj, TableByScope } from 'src/types'; import { api } from 'src/api'; import { isValidTransactionHex } from 'src/utils/string-utils'; import { useQuasar } from 'quasar'; +import { debounce } from 'src/utils/string-utils'; export default defineComponent({ name: 'HeaderSearch', @@ -16,7 +17,8 @@ export default defineComponent({ const options = ref([]); const isLoading = ref(false); - watch(inputValue, async () => { + const fetchData = async () => { + console.log('watching input value change'); if (inputValue.value === '') { options.value = []; return; @@ -34,7 +36,11 @@ export default defineComponent({ }); isLoading.value = false; - }); + }; + + const onInput = debounce(fetchData, 400); + + watch(inputValue, onInput); async function searchAccounts(value: string): Promise { try { diff --git a/src/utils/string-utils.ts b/src/utils/string-utils.ts index 1b8874e2..43324c5a 100644 --- a/src/utils/string-utils.ts +++ b/src/utils/string-utils.ts @@ -110,3 +110,19 @@ export function getRexHistoryAsset(data: RexHistory): string { return data.amount; } } + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export const debounce = ReturnType>( + callback: T, + timeout: number, +): ((...args: Parameters) => void) => { + console.log('debouncing'); + let timer: ReturnType; + + return (...args: Parameters) => { + clearTimeout(timer); + timer = setTimeout(() => { + callback(...args); + }, timeout); + }; +}; From 3f89b6a8a4007e0631682b0c272767845f6c3acd Mon Sep 17 00:00:00 2001 From: Kylan Hurt Date: Tue, 5 Dec 2023 18:48:45 -0300 Subject: [PATCH 2/5] Rename sleep util file and move debounce into it --- src/components/HeaderSearch.vue | 2 +- src/pages/ProposalItem.vue | 2 +- src/utils/sleep.ts | 3 --- src/utils/string-utils.ts | 16 ---------------- src/utils/time.ts | 19 +++++++++++++++++++ 5 files changed, 21 insertions(+), 21 deletions(-) delete mode 100644 src/utils/sleep.ts create mode 100644 src/utils/time.ts diff --git a/src/components/HeaderSearch.vue b/src/components/HeaderSearch.vue index fd8d69ac..bb328f09 100644 --- a/src/components/HeaderSearch.vue +++ b/src/components/HeaderSearch.vue @@ -5,7 +5,7 @@ import { OptionsObj, TableByScope } from 'src/types'; import { api } from 'src/api'; import { isValidTransactionHex } from 'src/utils/string-utils'; import { useQuasar } from 'quasar'; -import { debounce } from 'src/utils/string-utils'; +import { debounce } from 'src/utils/time'; export default defineComponent({ name: 'HeaderSearch', diff --git a/src/pages/ProposalItem.vue b/src/pages/ProposalItem.vue index 0098f7ae..77c4c59c 100644 --- a/src/pages/ProposalItem.vue +++ b/src/pages/ProposalItem.vue @@ -10,7 +10,7 @@ import sha256 from 'fast-sha256'; import { ABI, ABIDef, Action, Serializer, Transaction } from '@greymass/eosio'; import { useStore } from 'src/store'; import { deserializeActionDataFromAbi } from 'src/api/eosio_core'; -import { sleep } from 'src/utils/sleep'; +import { sleep } from 'src/utils/time'; export default defineComponent({ name: 'ProposalItem', diff --git a/src/utils/sleep.ts b/src/utils/sleep.ts deleted file mode 100644 index ebca2ae9..00000000 --- a/src/utils/sleep.ts +++ /dev/null @@ -1,3 +0,0 @@ -export function sleep(timeout = 1000): Promise { - return new Promise(r => setTimeout(r, timeout)); -} diff --git a/src/utils/string-utils.ts b/src/utils/string-utils.ts index 43324c5a..1b8874e2 100644 --- a/src/utils/string-utils.ts +++ b/src/utils/string-utils.ts @@ -110,19 +110,3 @@ export function getRexHistoryAsset(data: RexHistory): string { return data.amount; } } - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export const debounce = ReturnType>( - callback: T, - timeout: number, -): ((...args: Parameters) => void) => { - console.log('debouncing'); - let timer: ReturnType; - - return (...args: Parameters) => { - clearTimeout(timer); - timer = setTimeout(() => { - callback(...args); - }, timeout); - }; -}; diff --git a/src/utils/time.ts b/src/utils/time.ts new file mode 100644 index 00000000..9da940df --- /dev/null +++ b/src/utils/time.ts @@ -0,0 +1,19 @@ +export function sleep(timeout = 1000): Promise { + return new Promise(r => setTimeout(r, timeout)); +} + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export const debounce = ReturnType>( + callback: T, + timeout: number, +): ((...args: Parameters) => void) => { + console.log('debouncing'); + let timer: ReturnType; + + return (...args: Parameters) => { + clearTimeout(timer); + timer = setTimeout(() => { + callback(...args); + }, timeout); + }; +}; From 1f483365fb1afa9e55c83eac8c1362fc8f2f7e34 Mon Sep 17 00:00:00 2001 From: Kylan Hurt Date: Tue, 5 Dec 2023 18:52:51 -0300 Subject: [PATCH 3/5] Remove unnecessary console log --- src/components/HeaderSearch.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/HeaderSearch.vue b/src/components/HeaderSearch.vue index bb328f09..095e1727 100644 --- a/src/components/HeaderSearch.vue +++ b/src/components/HeaderSearch.vue @@ -18,7 +18,6 @@ export default defineComponent({ const isLoading = ref(false); const fetchData = async () => { - console.log('watching input value change'); if (inputValue.value === '') { options.value = []; return; From 6a7605a1e71457b320b28ec80bfaf55365b7fe49 Mon Sep 17 00:00:00 2001 From: Don Date: Tue, 12 Dec 2023 17:11:11 -0600 Subject: [PATCH 4/5] Update src/utils/time.ts --- src/utils/time.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utils/time.ts b/src/utils/time.ts index 9da940df..8abb8d6a 100644 --- a/src/utils/time.ts +++ b/src/utils/time.ts @@ -7,7 +7,6 @@ export const debounce = ReturnType>( callback: T, timeout: number, ): ((...args: Parameters) => void) => { - console.log('debouncing'); let timer: ReturnType; return (...args: Parameters) => { From 11d4aceb78c6fcdb940e326ab5f1553da32731d6 Mon Sep 17 00:00:00 2001 From: Don Date: Tue, 12 Dec 2023 17:11:32 -0600 Subject: [PATCH 5/5] Update src/components/HeaderSearch.vue --- src/components/HeaderSearch.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HeaderSearch.vue b/src/components/HeaderSearch.vue index 095e1727..2608a2a6 100644 --- a/src/components/HeaderSearch.vue +++ b/src/components/HeaderSearch.vue @@ -37,7 +37,7 @@ export default defineComponent({ isLoading.value = false; }; - const onInput = debounce(fetchData, 400); + const onInput = debounce(fetchData, 100); watch(inputValue, onInput);