Improve alias filter change handling in Svelte components
- Added a check to prevent unnecessary updates when the selected alias remains the same, enhancing performance. - Updated the alias filter select component to utilize the `untrack` function for more efficient value change handling. - Streamlined the alias filter change logic across main and users pages to ensure consistent behavior.
This commit is contained in:
@@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
|
||||
let {
|
||||
availableAliases = [],
|
||||
value = $bindable("all"),
|
||||
@@ -13,8 +15,17 @@
|
||||
onValueChange?: (next: string) => void;
|
||||
} = $props();
|
||||
|
||||
let prev = value || "all";
|
||||
|
||||
$effect(() => {
|
||||
if (!value) value = "all";
|
||||
if (!value) {
|
||||
value = "all";
|
||||
return;
|
||||
}
|
||||
if (value !== prev) {
|
||||
prev = value;
|
||||
untrack(() => onValueChange?.(value));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -23,11 +34,6 @@
|
||||
<select
|
||||
class="border-input bg-background mt-1 h-8 w-[220px] rounded-lg border px-2.5 text-sm outline-none focus-visible:border-ring"
|
||||
bind:value
|
||||
onchange={(e) => {
|
||||
const next = (e.currentTarget as HTMLSelectElement).value || "all";
|
||||
value = next;
|
||||
onValueChange?.(next);
|
||||
}}
|
||||
>
|
||||
<option value="all">{allLabel}</option>
|
||||
{#each availableAliases as alias (alias)}
|
||||
|
||||
@@ -221,6 +221,8 @@
|
||||
|
||||
async function handleAliasFilterChange(nextAlias: string) {
|
||||
aliasFilter = nextAlias;
|
||||
const currentUrlAlias = parseAliasFilter(page.url.searchParams.get('aliases'));
|
||||
if (nextAlias === currentUrlAlias) return;
|
||||
const q = new URLSearchParams(page.url.searchParams);
|
||||
if (nextAlias === 'all') q.delete('aliases');
|
||||
else q.set('aliases', nextAlias);
|
||||
|
||||
@@ -119,6 +119,8 @@
|
||||
|
||||
async function handleAliasFilterChange(nextAlias: string) {
|
||||
aliasFilter = nextAlias;
|
||||
const currentUrlAlias = parseAliasFilter(page.url.searchParams.get('aliases'));
|
||||
if (nextAlias === currentUrlAlias) return;
|
||||
const q = new URLSearchParams(page.url.searchParams);
|
||||
if (nextAlias === 'all') q.delete('aliases');
|
||||
else q.set('aliases', nextAlias);
|
||||
|
||||
Reference in New Issue
Block a user