feat: lazy load thumbnails on people and place list (#23682)

perf(web): lazy load thumbnails on people and place list

web/src/lib/components/assets/thumbnail/image-thumbnail.svelte

@@ -20,6 +20,7 @@
     hiddenIconClass?: string;
     class?: ClassValue;
     brokenAssetClass?: ClassValue;
+    preload?: boolean;
     onComplete?: ((errored: boolean) => void) | undefined;
   }
 
@@ -38,6 +39,7 @@
     onComplete = undefined,
     class: imageClass = '',
     brokenAssetClass = '',
+    preload = true,
   }: Props = $props();
 
   let loaded = $state(false);
@@ -92,6 +94,7 @@
     {title}
     class={['object-cover', optionalClasses, imageClass]}
     draggable="false"
+    loading={preload ? 'eager' : 'lazy'}
   />
 {/if}
 

web/src/lib/components/faces-page/manage-people-visibility.svelte

@@ -157,6 +157,7 @@
           altText={person.name}
           widthStyle="100%"
           hiddenIconClass="text-white group-hover:text-black transition-colors"
+          preload={false}
         />
         {#if person.name}
           <span class="absolute bottom-2 start-0 w-full select-text px-1 text-center font-medium text-white">

web/src/lib/components/faces-page/people-card.svelte

@@ -52,6 +52,7 @@
         title={person.name}
         widthStyle="100%"
         circle
+        preload={false}
       />
       {#if person.isFavorite}
         <div class="absolute top-4 start-4">

web/src/lib/components/places-page/places-card-group.svelte

@@ -49,6 +49,7 @@
               src={getAssetThumbnailUrl({ id: item.id, size: AssetMediaSize.Thumbnail })}
               alt={city}
               class="object-cover w-39 h-39"
+              loading="lazy"
             />
           </div>
           <span