Improve alias filter change handling in Svelte components
Publish telemt-api gateway Docker image / test (push) Successful in 28s
Publish telemt-api gateway Docker image / build-and-push (push) Successful in 2m26s

- 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:
Denozordec
2026-04-10 16:47:15 +07:00
parent 4ee9c6805c
commit c51482e04e
3 changed files with 16 additions and 6 deletions
@@ -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)}
+2
View File
@@ -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);
+2
View File
@@ -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);