pr feedback

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -218,7 +218,7 @@
       <div class="flex h-10 w-full items-center justify-between">
         <h2>PEOPLE</h2>
         <div class="flex gap-2 items-center">
-          {#if people.faces.some((person) => person.isHidden)}
+          {#if people.visiblePeople.some((person) => person.isHidden)}
             <CircleIconButton
               title="Show hidden people"
               icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
@@ -239,7 +239,7 @@
       </div>
 
       <div class="mt-2 flex flex-wrap gap-2">
-        {#each people.faces as person (person.id)}
+        {#each people.visiblePeople as person (person.id)}
           {#if showingHiddenPeople || !person.isHidden}
             <a
               class="w-[90px]"

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -64,6 +64,10 @@
   let loaderLoadingDoneTimeout: ReturnType<typeof setTimeout>;
   let automaticRefreshTimeout: ReturnType<typeof setTimeout>;
 
+  $: mapFacesToBeCreated = Object.entries(selectedPersonToAdd)
+    .filter(([_, value]) => value.person === null)
+    .map(([key, _]) => key);
+
   const thumbnailWidth = '90px';
 
   const generatePeopleWithoutFaces = async () => {
@@ -94,9 +98,23 @@
     isShowLoadingPeople = false;
   }
 
+  /*
+   * we wait for the server to create the feature photo for:
+   * - people which has been reassigned to a new person
+   * - faces removed assigned to a new person
+   *
+   * if after 15 seconds the server has not generated the feature photos,
+   * we go back to the detail-panel
+   */
   const onPersonThumbnail = (personId: string) => {
     assetFaceGenerated.push(personId);
-    if (isEqual(assetFaceGenerated, peopleToCreate) && loaderLoadingDoneTimeout && automaticRefreshTimeout) {
+
+    if (
+      isEqual(assetFaceGenerated, peopleToCreate) &&
+      isEqual(assetFaceGenerated, mapFacesToBeCreated) &&
+      loaderLoadingDoneTimeout &&
+      automaticRefreshTimeout
+    ) {
       clearTimeout(loaderLoadingDoneTimeout);
       clearTimeout(automaticRefreshTimeout);
       onRefresh();

web/src/lib/utils/thumbnail-util.ts

@@ -45,7 +45,7 @@ export function getAltText(asset: AssetResponseDto) {
     altText += ` in ${asset.exifInfo.city}, ${asset.exifInfo.country}`;
   }
 
-  const names = asset.people?.faces.filter((p) => p.name).map((p) => p.name) ?? [];
+  const names = asset.people?.visiblePeople.filter((p) => p.name).map((p) => p.name) ?? [];
   if (names.length == 1) {
     altText += ` with ${names[0]}`;
   }