From 09a9e3742cc1c577358ba5fff99b4a13db645928 Mon Sep 17 00:00:00 2001
From: Ole-Morten Duesund <olemd@glemt.net>
Date: Mon, 25 May 2026 20:26:53 +0200
Subject: [PATCH] =?UTF-8?q?fix(home):=20stop=20self-firing=20$effect=20tha?=
 =?UTF-8?q?t=20pinned=20list=20on=20"Laster=20=E2=80=A6"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 frontend/src/components/Home.svelte | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Home.svelte b/frontend/src/components/Home.svelte
index afcf990..db20e2c 100644
--- a/frontend/src/components/Home.svelte
+++ b/frontend/src/components/Home.svelte
@@ -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>