olemd/vinterliste
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

fix(home): stop self-firing $effect that pinned list on "Laster …"

Browse source 
The "Vis arkivert" / "Vis skjult" toggles re-fetch from the server
(filtering is server-side). I had wired the re-fetch through a
$effect tracking both checkboxes — but the effect body also read
`loading` to skip re-entry, which meant the effect re-ran every
time load() flipped `loading` to true and back. Each cycle called
load(), which flipped `loading` again, ad infinitum: the list
stayed pinned on "Laster …" forever.

Replace with explicit onchange handlers on the two checkboxes that
both update state AND call load() once. Same UX, no reactive loop.
This commit is contained in:
Ole-Morten Duesund 2026-05-25 20:26:53 +02:00
commit 09a9e3742c
1 changed files with 15 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/components/Home.svelte
View file

@ -52,12 +52,19 @@
}
// Re-fetch from the server when the toggles flip — the WHERE clause is
// server-side so we can't filter the existing array client-side.
$effect(() => {
void showArchived;
void showHidden;
if (!loading) load();
});
// server-side so we can't filter the existing array client-side. Triggered
// from the checkbox onchange handlers below, NOT from a $effect — the
// effect form had a self-fire loop (each load() toggles `loading`, the
// effect tracked `loading`, every cycle re-triggered itself, list stayed
// stuck on "Laster …").
function onToggleArchive(e: Event) {
showArchived = (e.currentTarget as HTMLInputElement).checked;
load();
}
function onToggleHidden(e: Event) {
showHidden = (e.currentTarget as HTMLInputElement).checked;
load();
}
function onCreated(a: Activity) {
activities = [a, ...activities];
@ -234,11 +241,11 @@
{#if !publicOnly && session.user}
<div class="row" style="gap: 1rem; margin-top: 0.5rem; font-size: 0.9rem;">
<label class="row" style="gap: 0.35rem;">
<input type="checkbox" bind:checked={showArchived} />
<input type="checkbox" checked={showArchived} onchange={onToggleArchive} />
<span class="muted">📦 Vis arkivert</span>
</label>
<label class="row" style="gap: 0.35rem;">
<input type="checkbox" bind:checked={showHidden} />
<input type="checkbox" checked={showHidden} onchange={onToggleHidden} />
<span class="muted">🙈 Vis skjult</span>
</label>
</div>