fix: debounce oidc client and user search

stonith404 · Sep 16, 2024 · 9c2848d · 9c2848d
1 parent 64cf562
commit 9c2848d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte b/frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte
@@ -7,6 +7,7 @@
 	import OIDCService from '$lib/services/oidc-service';
 	import type { OidcClient } from '$lib/types/oidc.type';
 	import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
+	import { debounced } from '$lib/utils/debounce-util';
 	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { LucidePencil, LucideTrash } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
@@ -28,6 +29,10 @@
 	});
 	let search = $state('');
 
+	const debouncedSearch = debounced(async (searchValue: string) => {
+		clients = await oidcService.listClients(searchValue, pagination);
+	}, 400);
+
 	async function deleteClient(client: OidcClient) {
 		openConfirmDialog({
 			title: `Delete ${client.name}`,
@@ -53,8 +58,7 @@
 	type="search"
 	placeholder="Search clients"
 	bind:value={search}
-	on:input={async (e) =>
-		(clients = await oidcService.listClients((e.target as HTMLInputElement).value, pagination))}
+	on:input={(e) => debouncedSearch((e.target as HTMLInputElement).value)}
 />
 <Table.Root>
 	<Table.Header class="sr-only">

diff --git a/frontend/src/routes/settings/admin/users/user-list.svelte b/frontend/src/routes/settings/admin/users/user-list.svelte
@@ -33,7 +33,9 @@
 	});
 	let search = $state('');
 
-	const debouncedFetchUsers = debounced(userService.list, 500);
+	const debouncedSearch = debounced(async (searchValue: string) => {
+		users = await userService.list(searchValue, pagination);
+	}, 400);
 
 	async function deleteUser(user: User) {
 		openConfirmDialog({
@@ -69,12 +71,11 @@
 	type="search"
 	placeholder="Search users"
 	bind:value={search}
-	on:input={async (e) =>
-		(users = await userService.list((e.target as HTMLInputElement).value, pagination))}
+	on:input={(e) => debouncedSearch((e.target as HTMLInputElement).value)}
 />
 <Table.Root>
 	<Table.Header>
-		<Table.Row> 
+		<Table.Row>
 			<Table.Head class="hidden md:table-cell">First name</Table.Head>
 			<Table.Head class="hidden md:table-cell">Last name</Table.Head>
 			<Table.Head>Email</Table.Head>