From d37b4ef7ffb3654bad0089b07bc241eb16eb8508 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Mon, 2 Feb 2026 09:11:18 -0600
Subject: [PATCH] fix(ui): prevent infinite loop in GenreFilterButton

Use onMount instead of $effect to load genres once.
Add initialized flag to prevent onFilterChange from firing
during initial subscription setup, which was causing
loadHome -> re-render -> loadGenres -> notify -> loadHome loop.
---
 src/lib/components/GenreFilterButton.svelte | 27 ++++++++++++---------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/GenreFilterButton.svelte b/src/lib/components/GenreFilterButton.svelte
index e2885b608..95c3e7941 100644
--- a/src/lib/components/GenreFilterButton.svelte
+++ b/src/lib/components/GenreFilterButton.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import { SlidersHorizontal } from 'lucide-svelte';
   import GenreFilterPopup from './GenreFilterPopup.svelte';
   import {
@@ -20,26 +21,30 @@
   let buttonEl: HTMLButtonElement | null = null;
   let hasFilter = $state(false);
   let selectedGenreName = $state<string | null>(null);
+  let initialized = false;
 
-  // Subscribe to filter changes
-  $effect(() => {
+  onMount(() => {
+    // Load genres once on mount
+    loadGenres();
+
+    // Initialize state
+    hasFilter = hasActiveFilter();
+    updateSelectedName();
+    initialized = true;
+
+    // Subscribe to filter changes
     const unsubscribe = subscribeGenre(() => {
       hasFilter = hasActiveFilter();
       updateSelectedName();
-      onFilterChange?.();
+      // Only notify parent after initialization to prevent infinite loops
+      if (initialized) {
+        onFilterChange?.();
+      }
     });
 
-    hasFilter = hasActiveFilter();
-    updateSelectedName();
-
     return unsubscribe;
   });
 
-  // Load genres on mount
-  $effect(() => {
-    loadGenres();
-  });
-
   function updateSelectedName() {
     const selectedIds = getSelectedGenreIds();
     if (selectedIds.size === 1) {