feat(web): Lazy load thumbnails on the people page (#5356)

* feat(web): Lazy load thumbnails on the people page

Instead of loading all people thumbnails at once, only the first few
should be loaded eagerly.
This reduces the load on client and server side.

* chore: change name

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -17,12 +17,14 @@
   export let circle = false;
   export let hidden = false;
   export let border = false;
+  export let preload = true;
   let complete = false;
 
   export let eyeColor: 'black' | 'white' = 'white';
 </script>
 
 <img
+  loading={preload ? 'eager' : 'lazy'}
   style:width={widthStyle}
   style:height={heightStyle}
   style:filter={hidden ? 'grayscale(50%)' : 'none'}

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

@@ -12,6 +12,7 @@
   import Icon from '$lib/components/elements/icon.svelte';
 
   export let person: PersonResponseDto;
+  export let preload = false;
 
   type MenuItemEvent = 'change-name' | 'set-birth-date' | 'merge-faces' | 'hide-face';
   let dispatch = createEventDispatcher<{
@@ -48,6 +49,7 @@
     <div class="h-48 w-48 rounded-xl brightness-95 filter">
       <ImageThumbnail
         shadow
+        {preload}
         url={api.getPeopleThumbnailUrl(person.id)}
         altText={person.name}
         title={person.name}