many changes

src/lib/components/library/CastSection.svelte

@@ -10,6 +10,9 @@
 
   let { people, title = "Cast & Crew" }: Props = $props();
 
+  // Map of person IDs to their image URLs, loaded asynchronously
+  let personImageUrls = $state<Map<string, string>>(new Map());
+
   // Group people by type
   const groupedPeople = $derived.by(() => {
     const groups: Record<string, Person[]> = {
@@ -58,18 +61,31 @@
     }
   }
 
-  function getPersonImageUrl(person: Person): string {
+  // Load image URL for a single person
+  async function loadPersonImageUrl(person: Person): Promise<void> {
+    if (!person.primaryImageTag || personImageUrls.has(person.id)) return;
+
     try {
       const repo = auth.getRepository();
-      return repo.getImageUrl(person.id, "Primary", {
+      const url = await repo.getImageUrl(person.id, "Primary", {
         maxWidth: 200,
         tag: person.primaryImageTag,
       });
+      personImageUrls.set(person.id, url);
     } catch {
-      return "";
+      personImageUrls.set(person.id, "");
     }
   }
 
+  // Load image URLs for all people
+  $effect(() => {
+    people.forEach((person) => {
+      if (person.primaryImageTag && !personImageUrls.has(person.id)) {
+        loadPersonImageUrl(person);
+      }
+    });
+  });
+
   function handlePersonClick(person: Person) {
     goto(`/library/${person.id}`);
   }
@@ -94,9 +110,9 @@
             >
               <!-- Person image -->
               <div class="w-24 h-24 rounded-full overflow-hidden bg-[var(--color-surface)] mb-2">
-                {#if person.primaryImageTag}
+                {#if person.primaryImageTag && personImageUrls.get(person.id)}
                   <img
-                    src={getPersonImageUrl(person)}
+                    src={personImageUrls.get(person.id)}
                     alt={person.name}
                     class="w-full h-full object-cover group-hover:scale-110 transition-transform"
                     loading="lazy"