Add Debounce to filter selection (#2104)

* changed watch to watchDebounced * test update * changed debonce value * Updatecomment Co-authored-by: Zack Krida <[email protected]> * Update comment Co-authored-by: Zack Krida <[email protected]> * update comment --------- Co-authored-by: Zack Krida <[email protected]>
WordPress · Feb 8, 2023 · d2926b7 · d2926b7
1 parent f0d3d20
commit d2926b7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/src/components/VFilters/VSearchGridFilter.vue b/src/components/VFilters/VSearchGridFilter.vue
@@ -51,10 +51,11 @@ import {
   ref,
   useContext,
   useRouter,
-  watch,
 } from "@nuxtjs/composition-api"
 import { kebab } from "case"
 
+import { watchDebounced } from "@vueuse/core"
+
 import { useSearchStore } from "~/stores/search"
 import { areQueriesEqual, ApiQueryParams } from "~/utils/search-query-transform"
 import { Focus, focusIn, getFocusableElements } from "~/utils/focus-management"
@@ -115,13 +116,14 @@ export default defineComponent({
      * This watcher fires even when the queries are equal. We update the path only
      * when the queries change.
      */
-    watch(
+    watchDebounced(
       () => searchStore.searchQueryParams,
       (newQuery: ApiQueryParams, oldQuery: ApiQueryParams) => {
         if (!areQueriesEqual(newQuery, oldQuery)) {
           router.push(searchStore.getSearchPath())
         }
-      }
+      },
+      { debounce: 800, maxWait: 5000 }
     )
 
     const focusableElements = computed(() =>

diff --git a/test/playwright/e2e/search-navigation-old.spec.ts b/test/playwright/e2e/search-navigation-old.spec.ts
@@ -24,6 +24,9 @@ test.describe("search history navigation", () => {
 
     // Apply a filter
     await page.click("#modification")
+    // There is a debounce when choosing a filter.
+    // we need to wait for the page to reload before running the test
+    await page.waitForNavigation()
 
     // Verify the filter is applied to the URL and the checkbox is checked
     // Note: Need to add that a search was actually executed with the new

diff --git a/test/playwright/e2e/search-navigation.spec.ts b/test/playwright/e2e/search-navigation.spec.ts
@@ -28,6 +28,9 @@ test.describe("search history navigation", () => {
 
       // Apply a filter
       await page.click("#modification")
+      // There is a debounce when choosing a filter.
+      // we need to wait for the page to reload before running the test
+      await page.waitForNavigation()
 
       // Verify the filter is applied to the URL and the checkbox is checked
       // Note: Need to add that a search was actually executed with the new