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">
|
<script lang="ts">
|
||||||
|
import { untrack } from 'svelte';
|
||||||
|
|
||||||
let {
|
let {
|
||||||
availableAliases = [],
|
availableAliases = [],
|
||||||
value = $bindable("all"),
|
value = $bindable("all"),
|
||||||
@@ -13,8 +15,17 @@
|
|||||||
onValueChange?: (next: string) => void;
|
onValueChange?: (next: string) => void;
|
||||||
} = $props();
|
} = $props();
|
||||||
|
|
||||||
|
let prev = value || "all";
|
||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (!value) value = "all";
|
if (!value) {
|
||||||
|
value = "all";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (value !== prev) {
|
||||||
|
prev = value;
|
||||||
|
untrack(() => onValueChange?.(value));
|
||||||
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -23,11 +34,6 @@
|
|||||||
<select
|
<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"
|
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
|
bind:value
|
||||||
onchange={(e) => {
|
|
||||||
const next = (e.currentTarget as HTMLSelectElement).value || "all";
|
|
||||||
value = next;
|
|
||||||
onValueChange?.(next);
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<option value="all">{allLabel}</option>
|
<option value="all">{allLabel}</option>
|
||||||
{#each availableAliases as alias (alias)}
|
{#each availableAliases as alias (alias)}
|
||||||
|
|||||||
@@ -221,6 +221,8 @@
|
|||||||
|
|
||||||
async function handleAliasFilterChange(nextAlias: string) {
|
async function handleAliasFilterChange(nextAlias: string) {
|
||||||
aliasFilter = nextAlias;
|
aliasFilter = nextAlias;
|
||||||
|
const currentUrlAlias = parseAliasFilter(page.url.searchParams.get('aliases'));
|
||||||
|
if (nextAlias === currentUrlAlias) return;
|
||||||
const q = new URLSearchParams(page.url.searchParams);
|
const q = new URLSearchParams(page.url.searchParams);
|
||||||
if (nextAlias === 'all') q.delete('aliases');
|
if (nextAlias === 'all') q.delete('aliases');
|
||||||
else q.set('aliases', nextAlias);
|
else q.set('aliases', nextAlias);
|
||||||
|
|||||||
@@ -119,6 +119,8 @@
|
|||||||
|
|
||||||
async function handleAliasFilterChange(nextAlias: string) {
|
async function handleAliasFilterChange(nextAlias: string) {
|
||||||
aliasFilter = nextAlias;
|
aliasFilter = nextAlias;
|
||||||
|
const currentUrlAlias = parseAliasFilter(page.url.searchParams.get('aliases'));
|
||||||
|
if (nextAlias === currentUrlAlias) return;
|
||||||
const q = new URLSearchParams(page.url.searchParams);
|
const q = new URLSearchParams(page.url.searchParams);
|
||||||
if (nextAlias === 'all') q.delete('aliases');
|
if (nextAlias === 'all') q.delete('aliases');
|
||||||
else q.set('aliases', nextAlias);
|
else q.set('aliases', nextAlias);
|
||||||
|
|||||||
Reference in New Issue
Block a user