From d2926b7f4dd6f887df9b2c9ddbe8cc439fb3347d Mon Sep 17 00:00:00 2001 From: Anton Date: Wed, 8 Feb 2023 08:37:26 +0200 Subject: [PATCH] Add Debounce to filter selection (#2104) * changed watch to watchDebounced * test update * changed debonce value * Updatecomment Co-authored-by: Zack Krida * Update comment Co-authored-by: Zack Krida * update comment --------- Co-authored-by: Zack Krida --- src/components/VFilters/VSearchGridFilter.vue | 8 +++++--- test/playwright/e2e/search-navigation-old.spec.ts | 3 +++ test/playwright/e2e/search-navigation.spec.ts | 3 +++ 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/VFilters/VSearchGridFilter.vue b/src/components/VFilters/VSearchGridFilter.vue index 319ac99dc9..e5f15af286 100644 --- 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 index 22c75dacc9..3e405cb101 100644 --- 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 index fd83bff66a..ee338c4138 100644 --- 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