From c51482e04eaaebb8ba1452d4e8a9373d876edff2 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Fri, 10 Apr 2026 16:47:15 +0700
Subject: [PATCH] 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.
---
 .../lib/components/alias-filter-select.svelte  | 18 ++++++++++++------
 web/src/routes/+page.svelte                    |  2 ++
 web/src/routes/users/+page.svelte              |  2 ++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/alias-filter-select.svelte b/web/src/lib/components/alias-filter-select.svelte
index 4de2926..7828294 100644
--- a/web/src/lib/components/alias-filter-select.svelte
+++ b/web/src/lib/components/alias-filter-select.svelte
@@ -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)}
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 6c9afe4..f935043 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -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);
diff --git a/web/src/routes/users/+page.svelte b/web/src/routes/users/+page.svelte
index a56d741..de308dc 100644
--- a/web/src/routes/users/+page.svelte
+++ b/web/src/routes/users/+page.svelte
@@ -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);