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
2026-01-28 00:33:23 +04:00
parent 57a2024c58
commit 2c12278444
11 changed files with 139 additions and 31 deletions
@@ -4,7 +4,7 @@
 	const { saveAs } = fileSaver;

 	import { WEBUI_NAME, config, functions as _functions, models, settings, user } from '$lib/stores';
-	import { onMount, getContext, tick } from 'svelte';
+	import { onMount, getContext, tick, onDestroy } from 'svelte';

 	import { goto } from '$app/navigation';
 	import {
@@ -53,6 +53,7 @@
 	let viewOption = '';

 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 	let selectedTag = '';
 	let selectedType = '';

@@ -70,12 +71,14 @@
 	let functions = null;
 	let filteredItems = [];

-	$: if (
-		functions &&
-		query !== undefined &&
-		selectedType !== undefined &&
-		viewOption !== undefined
-	) {
+	$: if (query !== undefined) {
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			setFilteredItems();
+		}, 300);
+	}
+
+	$: if (functions && selectedType !== undefined && viewOption !== undefined) {
 		setFilteredItems();
 	}

@@ -239,6 +242,10 @@
 			window.removeEventListener('blur-sm', onBlur);
 		};
 	});
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
 </script>

 <svelte:head>
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
+	import { getContext, onDestroy } from 'svelte';
 	const i18n = getContext('i18n');

 	import dayjs from 'dayjs';
@@ -30,6 +30,7 @@
 	let total = null;

 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 	let orderBy = 'created_at'; // default sort key
 	let direction = 'desc'; // default sort order

@@ -79,13 +80,21 @@
 		getUserList();
 	};

-	$: if (page !== null && query !== null && orderBy !== null && direction !== null) {
+	$: if (page !== null && orderBy !== null && direction !== null) {
 		getUserList();
 	}

-	$: if (query) {
-		page = 1;
+	$: if (query !== undefined) {
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			page = 1;
+			getUserList();
+		}, 300);
 	}
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
 </script>

 <div class=" max-h-full h-full w-full flex flex-col overflow-y-hidden">
@@ -2,7 +2,7 @@
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { WEBUI_NAME, config, user, showSidebar } from '$lib/stores';
 	import { goto } from '$app/navigation';
-	import { onMount, getContext } from 'svelte';
+	import { onMount, getContext, onDestroy } from 'svelte';

 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
@@ -43,6 +43,7 @@
 	let total = null;

 	let query = '';
+	let searchDebounceTimer: ReturnType<typeof setTimeout>;
 	let orderBy = 'created_at'; // default sort key
 	let direction = 'asc'; // default sort order

@@ -97,13 +98,21 @@
 		}
 	};

-	$: if (query) {
-		page = 1;
+	$: if (query !== undefined) {
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			page = 1;
+			getUserList();
+		}, 300);
 	}

-	$: if (query !== null && page !== null && orderBy !== null && direction !== null) {
+	$: if (page !== null && orderBy !== null && direction !== null) {
 		getUserList();
 	}
+
+	onDestroy(() => {
+		clearTimeout(searchDebounceTimer);
+	});
 </script>

 <ConfirmDialog