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 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">

View File

@@ -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>