From d3a4869a969463b28e1efabe828b99f4638136ea Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Fri, 8 Oct 2021 22:46:47 +0800
Subject: [PATCH] Debounce search & filter inputs (#8631)

* debounce search input

* debounce filter input

* rename to emitValueDebounced
---
 .../_system/system-filter/input-component.vue | 16 ++++++++++---
 .../components/search-input/search-input.vue  | 24 ++++++++++++++++---
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/app/src/interfaces/_system/system-filter/input-component.vue b/app/src/interfaces/_system/system-filter/input-component.vue
index 0621c43d61..39d2d1e5f1 100644
--- a/app/src/interfaces/_system/system-filter/input-component.vue
+++ b/app/src/interfaces/_system/system-filter/input-component.vue
@@ -14,7 +14,7 @@
 		:value="value"
 		:style="{ width }"
 		placeholder="--"
-		@input="emitValue($event.target.value)"
+		@input="emitValueDebounced($event.target.value)"
 	/>
 	<v-menu v-else :close-on-content-click="false" :show-arrow="true" placement="bottom-start">
 		<template #activator="{ toggle }">
@@ -27,12 +27,20 @@
 			<div v-else class="preview" @click="toggle">{{ displayValue }}</div>
 		</template>
 		<div class="input" :class="type">
-			<component :is="is" class="input-component" small :type="type" :value="value" @input="emitValue($event)" />
+			<component
+				:is="is"
+				class="input-component"
+				small
+				:type="type"
+				:value="value"
+				@input="emitValueDebounced($event)"
+			/>
 		</div>
 	</v-menu>
 </template>
 
 <script lang="ts">
+import { debounce } from 'lodash';
 import { computed, defineComponent, PropType, ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -79,7 +87,9 @@ export default defineComponent({
 			inputEl.value?.focus();
 		});
 
-		return { displayValue, width, t, emitValue, inputEl };
+		const emitValueDebounced = debounce((val: unknown) => emitValue(val), 250);
+
+		return { displayValue, width, t, emitValueDebounced, inputEl };
 
 		function emitValue(val: unknown) {
 			if (val === '') {
diff --git a/app/src/views/private/components/search-input/search-input.vue b/app/src/views/private/components/search-input/search-input.vue
index f52f327279..1c21c51083 100644
--- a/app/src/views/private/components/search-input/search-input.vue
+++ b/app/src/views/private/components/search-input/search-input.vue
@@ -10,7 +10,13 @@
 			@click="active = true"
 		>
 			<v-icon v-tooltip.bottom="active ? null : t('search')" name="search" class="icon-search" :clickable="!active" />
-			<input ref="input" :value="modelValue" :placeholder="t('search_items')" @input="emitValue" @paste="emitValue" />
+			<input
+				ref="input"
+				:value="modelValue"
+				:placeholder="t('search_items')"
+				@input="emitValueDebounced"
+				@paste="emitValueDebounced"
+			/>
 			<v-icon
 				v-if="modelValue"
 				clickable
@@ -46,7 +52,7 @@
 import { useI18n } from 'vue-i18n';
 import { defineComponent, ref, watch, PropType, computed } from 'vue';
 import { Filter } from '@directus/shared/types';
-import { isObject } from 'lodash';
+import { debounce, isObject } from 'lodash';
 
 export default defineComponent({
 	props: {
@@ -103,7 +109,19 @@ export default defineComponent({
 			}
 		});
 
-		return { t, active, disable, input, emitValue, activeFilterCount, filterActive, onClickOutside, filterBorder };
+		const emitValueDebounced = debounce(() => emitValue(), 250);
+
+		return {
+			t,
+			active,
+			disable,
+			input,
+			emitValueDebounced,
+			activeFilterCount,
+			filterActive,
+			onClickOutside,
+			filterBorder,
+		};
 
 		function onClickOutside(e: { path: HTMLElement[] }) {
 			if (e.path.some((el) => el?.classList?.contains('v-menu-content'))) return false;