many changes

src/lib/components/library/LibraryListView.svelte

@@ -13,23 +13,37 @@
 
   let { items, showProgress = false, showDownloadStatus = true, onItemClick }: Props = $props();
 
+  // Map of item IDs to their image URLs, loaded asynchronously
+  let imageUrls = $state<Map<string, string>>(new Map());
+
   function getDownloadInfo(itemId: string) {
     return Object.values($downloads.downloads).find((d) => d.itemId === itemId);
   }
 
-  function getImageUrl(item: MediaItem | Library): string {
+  // Load image URL for a single item
+  async function loadImageUrl(item: MediaItem | Library): Promise<void> {
     try {
       const repo = auth.getRepository();
       const tag = "primaryImageTag" in item ? item.primaryImageTag : ("imageTag" in item ? item.imageTag : undefined);
-      return repo.getImageUrl(item.id, "Primary", {
+      const url = await repo.getImageUrl(item.id, "Primary", {
         maxWidth: 80,
         tag,
       });
+      imageUrls.set(item.id, url);
     } catch {
-      return "";
+      imageUrls.set(item.id, "");
     }
   }
 
+  // Load image URLs whenever items change
+  $effect(() => {
+    items.forEach((item) => {
+      if (!imageUrls.has(item.id)) {
+        loadImageUrl(item);
+      }
+    });
+  });
+
   function getSubtitle(item: MediaItem | Library): string {
     if (!("type" in item)) return "";
 
@@ -66,7 +80,7 @@
 
 <div class="space-y-1">
   {#each items as item, index (item.id)}
-    {@const imageUrl = getImageUrl(item)}
+    {@const imageUrl = imageUrls.get(item.id) ?? ""}
     {@const subtitle = getSubtitle(item)}
     {@const duration = "runTimeTicks" in item ? formatDuration(item.runTimeTicks) : ""}
     {@const progress = getProgress(item)}