fix(*): update useDebounce to fix delays in KTable after clearing the search #1220

sumimakito · 2023-03-16T09:20:30Z

Summary

After clearing the search input in a KTable, a perceptible delay is observed before KTable triggers the fetcher function.

This PR also refactored the useDebounce function to accept functions, which makes it more general.

Another option to fix this is to use the defineExpose to expose a function to clear the search input and trigger the revalidate function immediately.

KHCP-6651

PR Checklist

Does not introduce dependencies
Functional: all changes do not break existing APIs and if so, bump major version.
Tests pass: check the output of yarn test
Naming: the files and the method and prop variables use the same naming conventions as other Kongponents
Framework style: abides by the essential rules in Vue's style guide
Cleanliness: does not have formatting issues, unused code (e.g., console.logs, debugger), or leftover comments
Docs: includes a technically accurate README, uses JSDOC where appropriate

netlify · 2023-03-16T09:21:31Z

✅ Deploy Preview for kongponents ready!

Name	Link
🔨 Latest commit	`5bdb813`
🔍 Latest deploy log	https://app.netlify.com/sites/kongponents/deploys/641a75577e1bee0008e48446
😎 Deploy Preview	https://deploy-preview-1220--kongponents.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

… search

src/components/KTable/KTable.vue

adamdehaven · 2023-03-16T17:19:34Z

src/components/KCatalog/KCatalog.vue

@@ -486,7 +486,9 @@ export default defineComponent({
      hasInitialized.value = true
    }

-    const { query, search } = useDebounce('', 350)
+    const query = ref('')
+    const [search] = useDebounce((q: string) => { query.value = q })


This appears to be a breaking change since the return format is now an array instead of an object?

Yes. We only have two components using this composable: KTable and KCatalog. I intended to make useDebounce return two functions: one is the denounced function, and the other one is a function that accepts a delay (other than the default one) and returns a new debounced function with that new delay (but which shares the same timeout handle). I tried to implement this composable to make it as general as possible for different circumstances.

This allows us to trigger the underlying function with a different delay. For example, if we want to call the function immediately and clear all pending calls, we can use the second function to generate a debounced function with no delay and trigger it.

Is it possible to refactor the composable to return an object instead of an array; one property for each function?

I refactored the useDebounce composable to make it returns an object instead of an array.

src/composables/useUtilities.ts

sumimakito · 2023-03-16T19:17:34Z

src/components/KCatalog/KCatalog.vue

@@ -486,7 +486,9 @@ export default defineComponent({
      hasInitialized.value = true
    }

-    const { query, search } = useDebounce('', 350)
+    const query = ref('')
+    const [search] = useDebounce((q: string) => { query.value = q })


Yes. We only have two components using this composable: KTable and KCatalog. I intended to make useDebounce return two functions: one is the denounced function, and the other one is a function that accepts a delay (other than the default one) and returns a new debounced function with that new delay (but which shares the same timeout handle). I tried to implement this composable to make it as general as possible for different circumstances.

This allows us to trigger the underlying function with a different delay. For example, if we want to call the function immediately and clear all pending calls, we can use the second function to generate a debounced function with no delay and trigger it.

src/components/KTable/KTable.vue

adamdehaven · 2023-03-20T13:14:05Z

src/components/KTable/KTable.vue

+      if (newValue === '') {
+        search(newValue)
+      } else {
+        debouncedSearch(newValue)
+      }


suggestion: Can you add some comments here to explain why we are using two different methods?

Comments added

adamdehaven · 2023-03-20T13:15:44Z

src/components/KTable/KTable.vue

+    watch(() => [query.value, page.value, pageSize.value], ([newQuery, , , oldQuery]) => {
+      if (newQuery === '' && newQuery !== oldQuery) {
+        revalidate()
+      } else {
+        debouncedRevalidate()
+      }
    }, { deep: true, immediate: true })


This is a bit confusing with the empty array in the callback; could this be refactored or utilize watchEffect instead?

@sumimakito ^

Thanks. That's a good idea.

adamdehaven

@sumimakito I reviewed everything here and it appears to be solid.

After merge, can you pull it into Kong Manager on Wednesday and test/verify all of the table fetchers are still working as intended? It's hard to test every use-case here

## [8.40.7](v8.40.6...v8.40.7) (2023-03-22) ### Bug Fixes * update useDebounce to fix delays in KTable after clearing the search ([#1220](#1220)) ([a550695](a550695))

kongponents-bot · 2023-03-22T05:36:48Z

🎉 This PR is included in version 8.40.7 🎉

The release is available on:

Your semantic-release bot 📦🚀

sumimakito requested a review from a team as a code owner March 16, 2023 09:20

fix(*): update useDebounce to fix delays in KTable after clearing the…

fc9f48a

… search

sumimakito force-pushed the fix/debounce-clear-delays branch from 62fb1a0 to fc9f48a Compare March 16, 2023 14:29

adamdehaven reviewed Mar 16, 2023

View reviewed changes

sumimakito commented Mar 16, 2023

View reviewed changes

adamdehaven reviewed Mar 20, 2023

View reviewed changes

sumimakito and others added 4 commits March 21, 2023 12:10

chore: update useUtilities.ts

ba6c387

refactor(use-debounce): return an object instead of an array

c9f0779

docs(table): add comments

94f9d65

test(table): add tests for debounced functions

b0be109

adamdehaven force-pushed the fix/debounce-clear-delays branch from d746b2e to b0be109 Compare March 21, 2023 16:12

adamdehaven approved these changes Mar 21, 2023

View reviewed changes

Merge branch 'main' into fix/debounce-clear-delays

5bdb813

Leopoldthecoder approved these changes Mar 22, 2023

View reviewed changes

sumimakito merged commit a550695 into main Mar 22, 2023
7 checks passed

sumimakito deleted the fix/debounce-clear-delays branch March 22, 2023 05:27

kongponents-bot pushed a commit that referenced this pull request Mar 22, 2023

chore(release): 8.40.7 [skip ci]

18205a0

## [8.40.7](v8.40.6...v8.40.7) (2023-03-22) ### Bug Fixes * update useDebounce to fix delays in KTable after clearing the search ([#1220](#1220)) ([a550695](a550695))

kongponents-bot added the released label Mar 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(*): update useDebounce to fix delays in KTable after clearing the search #1220

fix(*): update useDebounce to fix delays in KTable after clearing the search #1220

sumimakito commented Mar 16, 2023

netlify bot commented Mar 16, 2023 •

edited

adamdehaven Mar 16, 2023

sumimakito Mar 16, 2023

adamdehaven Mar 16, 2023

sumimakito Mar 17, 2023

sumimakito Mar 16, 2023

adamdehaven Mar 20, 2023

sumimakito Mar 21, 2023

adamdehaven Mar 20, 2023

adamdehaven Mar 21, 2023

sumimakito Mar 21, 2023

adamdehaven left a comment

kongponents-bot commented Mar 22, 2023

fix(*): update useDebounce to fix delays in KTable after clearing the search #1220

fix(*): update useDebounce to fix delays in KTable after clearing the search #1220

Conversation

sumimakito commented Mar 16, 2023

Summary

PR Checklist

netlify bot commented Mar 16, 2023 • edited

✅ Deploy Preview for kongponents ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamdehaven left a comment

Choose a reason for hiding this comment

kongponents-bot commented Mar 22, 2023

netlify bot commented Mar 16, 2023 •

edited