many changes

src/lib/components/library/GenericGenreBrowser.svelte

@@ -41,6 +41,7 @@
   let selectedGenre = $state<Genre | null>(null);
   let genreItems = $state<MediaItem[]>([]);
   let loadingItems = $state(false);
+  let genreItemImageUrls = $state<Map<string, string>>(new Map());
 
   const { markLoaded } = useServerReachabilityReload(async () => {
     await loadGenres();
@@ -79,6 +80,7 @@
     try {
       loadingItems = true;
       selectedGenre = genre;
+      genreItemImageUrls = new Map(); // Clear image URLs when loading new genre
       const repo = auth.getRepository();
       const result = await repo.getItems($currentLibrary.id, {
         includeItemTypes: config.itemTypes,
@@ -96,6 +98,31 @@
     }
   }
 
+  // Load image URL for a single item
+  async function loadGenreItemImage(item: MediaItem): Promise<void> {
+    if (!item.primaryImageTag || genreItemImageUrls.has(item.id)) return;
+
+    try {
+      const repo = auth.getRepository();
+      const url = await repo.getImageUrl(item.id, "Primary", {
+        maxWidth: 300,
+        tag: item.primaryImageTag,
+      });
+      genreItemImageUrls.set(item.id, url);
+    } catch {
+      genreItemImageUrls.set(item.id, "");
+    }
+  }
+
+  // Load image URLs for all genre items
+  $effect(() => {
+    genreItems.forEach((item) => {
+      if (item.primaryImageTag && !genreItemImageUrls.has(item.id)) {
+        loadGenreItemImage(item);
+      }
+    });
+  });
+
   function applyFilter() {
     let result = [...genres];
 
@@ -217,12 +244,9 @@
           {#each genreItems as item (item.id)}
             <button onclick={() => handleItemClick(item)} class="group text-left">
               <div class="{aspectRatioClass} bg-[var(--color-surface)] rounded-lg overflow-hidden mb-2">
-                {#if item.primaryImageTag}
+                {#if item.primaryImageTag && genreItemImageUrls.get(item.id)}
                   <img
-                    src={auth.getRepository().getImageUrl(item.id, "Primary", {
-                      maxWidth: 300,
-                      tag: item.primaryImageTag,
-                    })}
+                    src={genreItemImageUrls.get(item.id)}
                     alt={item.name}
                     class="w-full h-full object-cover group-hover:scale-105 transition-transform"
                   />