From 9e2826057e95650d20161275c30dd7a1804df935 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 21 Jan 2021 14:38:37 -0500
Subject: [PATCH] Optimize search performance

---
 app/src/composables/use-items/use-items.ts    | 22 +++++++++++++++++--
 app/src/composables/use-preset/use-preset.ts  |  2 --
 .../components/search-input/search-input.vue  |  3 +--
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/src/composables/use-items/use-items.ts b/app/src/composables/use-items/use-items.ts
index c121e8f532..c36549f8c7 100644
--- a/app/src/composables/use-items/use-items.ts
+++ b/app/src/composables/use-items/use-items.ts
@@ -5,7 +5,7 @@ import Vue from 'vue';
 import { isEqual } from 'lodash';
 import { Filter } from '@/types/';
 import filtersToQuery from '@/utils/filters-to-query';
-import { orderBy } from 'lodash';
+import { orderBy, throttle } from 'lodash';
 import moveInArray from '@/utils/move-in-array';
 
 type Query = {
@@ -91,7 +91,7 @@ export function useItems(collection: Ref<string>, query: Query) {
 		}
 	});
 
-	watch([filters, limit, searchQuery], async (after, before) => {
+	watch([filters, limit], async (after, before) => {
 		if (!before || isEqual(after, before)) {
 			return;
 		}
@@ -102,6 +102,24 @@ export function useItems(collection: Ref<string>, query: Query) {
 		}
 	});
 
+	watch(
+		searchQuery,
+		throttle(
+			async (after, before) => {
+				if (!before || isEqual(after, before)) {
+					return;
+				}
+				page.value = 1;
+				await Vue.nextTick();
+				if (loading.value === false) {
+					getItems();
+				}
+			},
+			500,
+			{ trailing: true }
+		)
+	);
+
 	return { itemCount, totalCount, items, totalPages, loading, error, changeManualSort, getItems };
 
 	async function getItems() {
diff --git a/app/src/composables/use-preset/use-preset.ts b/app/src/composables/use-preset/use-preset.ts
index 743c01312f..ad11bbc6af 100644
--- a/app/src/composables/use-preset/use-preset.ts
+++ b/app/src/composables/use-preset/use-preset.ts
@@ -27,7 +27,6 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 	const savePreset = async (preset?: Partial<Preset>) => {
 		busy.value = true;
 		const updatedValues = await presetsStore.savePreset(preset ? preset : localPreset.value);
-		initLocalPreset();
 		localPreset.value.id = updatedValues.id;
 		busy.value = false;
 		return updatedValues;
@@ -35,7 +34,6 @@ export function usePreset(collection: Ref<string>, bookmark: Ref<number | null>
 
 	const saveLocal = () => {
 		presetsStore.saveLocal(localPreset.value);
-		initLocalPreset();
 	};
 
 	const clearLocalSave = async () => {
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 d8bbae2b6b..2a114e3387 100644
--- a/app/src/views/private/components/search-input/search-input.vue
+++ b/app/src/views/private/components/search-input/search-input.vue
@@ -14,7 +14,6 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch } from '@vue/composition-api';
-import { debounce } from 'lodash';
 
 export default defineComponent({
 	props: {
@@ -34,7 +33,7 @@ export default defineComponent({
 			}
 		});
 
-		const emitValue = debounce((event: InputEvent) => emit('input', (event.target as HTMLInputElement).value), 850);
+		const emitValue = (event: InputEvent) => emit('input', (event.target as HTMLInputElement).value);
 
 		return { active, disable, input, emitValue, emptyAndClose };