Optimize search performance

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() {

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 () => {

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 };