fix: debounce oidc client and user search

This commit is contained in:
Elias Schneider
2024-09-16 23:18:55 +02:00
parent 64cf56276a
commit 9c2848db1d
2 changed files with 11 additions and 6 deletions

View File

@@ -7,6 +7,7 @@
import OIDCService from '$lib/services/oidc-service'; import OIDCService from '$lib/services/oidc-service';
import type { OidcClient } from '$lib/types/oidc.type'; import type { OidcClient } from '$lib/types/oidc.type';
import type { Paginated, PaginationRequest } from '$lib/types/pagination.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 { axiosErrorToast } from '$lib/utils/error-util';
import { LucidePencil, LucideTrash } from 'lucide-svelte'; import { LucidePencil, LucideTrash } from 'lucide-svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
@@ -28,6 +29,10 @@
}); });
let search = $state(''); let search = $state('');
const debouncedSearch = debounced(async (searchValue: string) => {
clients = await oidcService.listClients(searchValue, pagination);
}, 400);
async function deleteClient(client: OidcClient) { async function deleteClient(client: OidcClient) {
openConfirmDialog({ openConfirmDialog({
title: `Delete ${client.name}`, title: `Delete ${client.name}`,
@@ -53,8 +58,7 @@
type="search" type="search"
placeholder="Search clients" placeholder="Search clients"
bind:value={search} bind:value={search}
on:input={async (e) => on:input={(e) => debouncedSearch((e.target as HTMLInputElement).value)}
(clients = await oidcService.listClients((e.target as HTMLInputElement).value, pagination))}
/> />
<Table.Root> <Table.Root>
<Table.Header class="sr-only"> <Table.Header class="sr-only">

View File

@@ -33,7 +33,9 @@
}); });
let search = $state(''); 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) { async function deleteUser(user: User) {
openConfirmDialog({ openConfirmDialog({
@@ -69,8 +71,7 @@
type="search" type="search"
placeholder="Search users" placeholder="Search users"
bind:value={search} bind:value={search}
on:input={async (e) => on:input={(e) => debouncedSearch((e.target as HTMLInputElement).value)}
(users = await userService.list((e.target as HTMLInputElement).value, pagination))}
/> />
<Table.Root> <Table.Root>
<Table.Header> <Table.Header>