perf: Debounce various Database Endpoints for less Database Queries and better Backend performance (#20982)

* Update KnowledgeSelector.svelte

* Update KnowledgeSelector.svelte

* Update Users.svelte

* Update MemberSelector.svelte

* Update MemberSelector.svelte

* Update Knowledge.svelte

* Update Knowledge.svelte

* Update Notes.svelte

* Update Knowledge.svelte

* Update Prompts.svelte

* Update Tools.svelte

* Update Tools.svelte

* Update Prompts.svelte

* Update Prompts.svelte

* Update Prompts.svelte

* Update Functions.svelte

* Update UserList.svelte

* Update Functions.svelte

* Update Prompts.svelte

* Update UserList.svelte

src/lib/components/workspace/Knowledge.svelte

@@ -4,7 +4,7 @@
 	dayjs.extend(relativeTime);
 
 	import { toast } from 'svelte-sonner';
-	import { onMount, getContext, tick } from 'svelte';
+	import { onMount, getContext, tick, onDestroy } from 'svelte';
 	const i18n = getContext('i18n');
 
 	import { WEBUI_NAME, knowledge, user } from '$lib/stores';
@@ -36,6 +36,7 @@
 
 	let page = 1;
 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 	let viewOption = '';
 
 	let items = null;
@@ -44,7 +45,20 @@
 	let allItemsLoaded = false;
 	let itemsLoading = false;
 
-	$: if (loaded && query !== undefined && viewOption !== undefined) {
+	$: if (query !== undefined) {
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			if (loaded) {
+				init();
+			}
+		}, 300);
+	}
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
+
+	$: if (loaded && viewOption !== undefined) {
 		init();
 	}
 

src/lib/components/workspace/Models/Knowledge/KnowledgeSelector.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import dayjs from 'dayjs';
 	import { DropdownMenu } from 'bits-ui';
-	import { onMount, getContext, createEventDispatcher } from 'svelte';
-
+	import { onMount, onDestroy, getContext, createEventDispatcher } from 'svelte';
 	import { searchNotes } from '$lib/apis/notes';
 	import { searchKnowledgeBases, searchKnowledgeFiles } from '$lib/apis/knowledge';
 
@@ -26,6 +25,7 @@
 	let show = false;
 
 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 
 	let noteItems = [];
 	let knowledgeItems = [];
@@ -35,10 +35,17 @@
 
 	$: items = [...noteItems, ...knowledgeItems, ...fileItems];
 
-	$: if (query !== null) {
-		getItems();
+	$: if (query !== undefined) {
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			getItems();
+		}, 300);
 	}
 
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
+
 	const getItems = () => {
 		getNoteItems();
 		getKnowledgeItems();

src/lib/components/workspace/Prompts.svelte

@@ -4,7 +4,7 @@
 	const { saveAs } = fileSaver;
 
 	import { goto } from '$app/navigation';
-	import { onMount, getContext, tick } from 'svelte';
+	import { onMount, getContext, tick, onDestroy } from 'svelte';
 	import { WEBUI_NAME, config, prompts as _prompts, user } from '$lib/stores';
 
 	import {
@@ -32,6 +32,7 @@
 	import TagSelector from './common/TagSelector.svelte';
 	import Badge from '$lib/components/common/Badge.svelte';
 	import Pagination from '../common/Pagination.svelte';
+  
 	let shiftKey = false;
 
 	const i18n = getContext('i18n');
@@ -40,6 +41,7 @@
 
 	let importFiles = null;
 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 
 	let prompts = null;
 	let tags = [];
@@ -55,7 +57,6 @@
 	let copiedId: string | null = null;
 
 	let page = 1;
-	let searchDebounceTimer;
 
 	// Debounce only query changes
 	$: if (query !== undefined) {
@@ -195,11 +196,16 @@
 		window.addEventListener('blur', onBlur);
 
 		return () => {
+			clearTimeout(searchDebounceTimer);
 			window.removeEventListener('keydown', onKeyDown);
 			window.removeEventListener('keyup', onKeyUp);
 			window.removeEventListener('blur', onBlur);
 		};
 	});
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
 </script>
 
 <svelte:head>

src/lib/components/workspace/Tools.svelte

@@ -3,7 +3,7 @@
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
-	import { onMount, getContext, tick } from 'svelte';
+	import { onMount, getContext, tick, onDestroy } from 'svelte';
 	const i18n = getContext('i18n');
 
 	import { WEBUI_NAME, config, prompts, tools as _tools, user } from '$lib/stores';
@@ -47,6 +47,7 @@
 
 	let showConfirm = false;
 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 
 	let showManifestModal = false;
 	let showValvesModal = false;
@@ -62,7 +63,14 @@
 
 	let showImportModal = false;
 
-	$: if (tools && query !== undefined && viewOption !== undefined) {
+	$: if (query !== undefined) {
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			setFilteredItems();
+		}, 300);
+	}
+
+	$: if (tools && viewOption !== undefined) {
 		setFilteredItems();
 	}
 
@@ -179,11 +187,16 @@
 		window.addEventListener('blur-sm', onBlur);
 
 		return () => {
+			clearTimeout(searchDebounceTimer);
 			window.removeEventListener('keydown', onKeyDown);
 			window.removeEventListener('keyup', onKeyUp);
 			window.removeEventListener('blur-sm', onBlur);
 		};
 	});
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
 </script>
 
 <svelte:head>

src/lib/components/workspace/common/MemberSelector.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import { getContext, onMount } from 'svelte';
+	import { getContext, onMount, onDestroy } from 'svelte';
 
 	const i18n = getContext('i18n');
 
@@ -39,6 +39,7 @@
 	let total = null;
 
 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 	let orderBy = 'name'; // default sort key
 	let direction = 'asc'; // default sort order
 
@@ -60,7 +61,18 @@
 		}
 	};
 
-	$: if (page !== null && query !== null && orderBy !== null && direction !== null) {
+	$: if (query !== undefined) {
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			getUserList();
+		}, 300);
+	}
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
+
+	$: if (page !== null && orderBy !== null && direction !== null) {
 		getUserList();
 	}