Many improvemtns and fixes related to decoupling of svelte and rust on android.

src/lib/components/library/CastSection.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Person, PersonType } from "$lib/api/types";
-  import { auth } from "$lib/stores/auth";
   import { goto } from "$app/navigation";
+  import CachedImage from "$lib/components/common/CachedImage.svelte";
 
   interface Props {
     people: Person[];
@@ -10,9 +10,6 @@
 
   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[]> = {
@@ -61,31 +58,6 @@
     }
   }
 
-  // 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();
-      const url = await repo.getImageUrl(person.id, "Primary", {
-        maxWidth: 200,
-        tag: person.primaryImageTag,
-      });
-      personImageUrls.set(person.id, url);
-    } catch {
-      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}`);
   }
@@ -110,20 +82,14 @@
             >
               <!-- Person image -->
               <div class="w-24 h-24 rounded-full overflow-hidden bg-[var(--color-surface)] mb-2">
-                {#if person.primaryImageTag && personImageUrls.get(person.id)}
-                  <img
-                    src={personImageUrls.get(person.id)}
-                    alt={person.name}
-                    class="w-full h-full object-cover group-hover:scale-110 transition-transform"
-                    loading="lazy"
-                  />
-                {:else}
-                  <div class="w-full h-full flex items-center justify-center text-gray-500">
-                    <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24">
-                      <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
-                    </svg>
-                  </div>
-                {/if}
+                <CachedImage
+                  itemId={person.id}
+                  imageType="Primary"
+                  tag={person.primaryImageTag}
+                  maxWidth={200}
+                  alt={person.name}
+                  class="w-full h-full object-cover group-hover:scale-110 transition-transform"
+                />
               </div>
 
               <!-- Name and role -->