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.

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 priority = false;
   let complete = false;
 
   export let eyeColor: 'black' | 'white' = 'white';
 </script>
 
 <img
+  loading={priority ? '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 priority = 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
+        {priority}
         url={api.getPeopleThumbnailUrl(person.id)}
         altText={person.name}
         title={person.name}

web/src/routes/(user)/people/+page.svelte

@@ -372,10 +372,11 @@
   {#if countVisiblePeople > 0}
     <div class="pl-4">
       <div class="flex flex-row flex-wrap gap-1">
-        {#each people as person (person.id)}
+        {#each people as person, idx (person.id)}
           {#if !person.isHidden}
             <PeopleCard
               {person}
+              priority={idx < 20}
               on:change-name={() => handleChangeName(person)}
               on:set-birth-date={() => handleSetBirthDate(person)}
               on:merge-faces={() => handleMergeFaces(person)}
@@ -444,14 +445,15 @@
     bind:showLoadingSpinner
     bind:toggleVisibility
   >
-    {#each people as person (person.id)}
+    {#each people as person, idx (person.id)}
       <button
         class="relative h-36 w-36 md:h-48 md:w-48"
         on:click={() => (person.isHidden = !person.isHidden)}
         on:mouseenter={() => (eyeColorMap[person.id] = 'black')}
         on:mouseleave={() => (eyeColorMap[person.id] = 'white')}
       >
         <ImageThumbnail
+          priority={idx < 20}
           bind:hidden={person.isHidden}
           shadow
           url={api.getPeopleThumbnailUrl(person.id)}