many changes

src/lib/components/library/PersonDetailView.svelte

@@ -14,6 +14,7 @@
   let movies = $state<MediaItem[]>([]);
   let series = $state<MediaItem[]>([]);
   let loading = $state(true);
+  let imageUrl = $state<string>("");
 
   onMount(async () => {
     await loadFilmography();
@@ -38,23 +39,27 @@
     }
   }
 
-  function getImageUrl(): string {
+  // Load image URL asynchronously
+  async function loadImageUrl(): Promise<void> {
     try {
       const repo = auth.getRepository();
-      return repo.getImageUrl(person.id, "Primary", {
+      imageUrl = await repo.getImageUrl(person.id, "Primary", {
         maxWidth: 400,
         tag: person.primaryImageTag,
       });
     } catch {
-      return "";
+      imageUrl = "";
     }
   }
 
+  // Load image when person changes
+  $effect(() => {
+    loadImageUrl();
+  });
+
   function handleItemClick(item: MediaItem) {
     goto(`/library/${item.id}`);
   }
-
-  const imageUrl = $derived(getImageUrl());
 </script>
 
 <div class="space-y-8">