refactor(web): search people (#9082)

* refactor: search people * fix: test * fix: timeout * fix: callbacks * fix: simplify * remove unused var * refactor: rename file * fix: focus when deleting last character --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com> Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
2024-12-29 15:11:58 +00:00 · 2024-04-29 23:38:15 +02:00 · 2024-04-29 23:38:15 +02:00 · 5722c830ff
commit 5722c830ff
parent 72ce81f0c2
12 changed files with 207 additions and 267 deletions
--- a/web/src/lib/components/album-page/albums-controls.svelte
+++ b/web/src/lib/components/album-page/albums-controls.svelte
@ -100,7 +100,7 @@

 <!-- Search Albums -->
 <div class="hidden xl:block h-10 xl:w-60 2xl:w-80">
-  <SearchBar placeholder="Search albums" bind:name={searchQuery} isSearching={false} />
+  <SearchBar placeholder="Search albums" bind:name={searchQuery} showLoadingSpinner={false} />
 </div>

 <!-- Create Album -->
--- a/web/src/lib/components/elements/search-bar.svelte
+++ b/web/src/lib/components/elements/search-bar.svelte
@ -7,7 +7,7 @@

  export let name: string;
  export let roundedBottom = true;
-  export let isSearching: boolean;
+  export let showLoadingSpinner: boolean;
  export let placeholder: string;

  const dispatch = createEventDispatcher<{ search: SearchOptions; reset: void }>();
@ -16,6 +16,12 @@
    name = '';
    dispatch('reset');
  };
+
+  const handleSearch = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      dispatch('search', { force: true });
+    }
+  };
 </script>

 <div
@ -33,9 +39,10 @@
    type="text"
    {placeholder}
    bind:value={name}
+    on:keydown={handleSearch}
    on:input={() => dispatch('search', { force: false })}
  />
-  {#if isSearching}
+  {#if showLoadingSpinner}
    <div class="flex place-items-center">
      <LoadingSpinner />
    </div>
--- a/web/src/lib/components/faces-page/assign-face-side-panel.svelte
+++ b/web/src/lib/components/faces-page/assign-face-side-panel.svelte
@ -1,16 +1,9 @@
 <script lang="ts">
-  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
+  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
  import { photoViewer } from '$lib/stores/assets.store';
  import { getAssetThumbnailUrl, getPeopleThumbnailUrl } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import { getPersonNameWithHiddenValue, searchNameLocal } from '$lib/utils/person';
-  import {
-    AssetTypeEnum,
-    ThumbnailFormat,
-    searchPerson,
-    type AssetFaceResponseDto,
-    type PersonResponseDto,
-  } from '@immich/sdk';
+  import { getPersonNameWithHiddenValue } from '$lib/utils/person';
+  import { AssetTypeEnum, ThumbnailFormat, type AssetFaceResponseDto, type PersonResponseDto } from '@immich/sdk';
  import { mdiArrowLeftThin, mdiClose, mdiMagnify, mdiPlus } from '@mdi/js';
  import { createEventDispatcher } from 'svelte';
  import { linear } from 'svelte/easing';
@ -18,6 +11,7 @@
  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
  import Icon from '../elements/icon.svelte';
  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import SearchPeople from '$lib/components/faces-page/people-search.svelte';

  export let peopleWithFaces: AssetFaceResponseDto[];
  export let allPeople: PersonResponseDto[];
@ -31,11 +25,11 @@

  // search people
  let searchedPeople: PersonResponseDto[] = [];
-  let searchedPeopleCopy: PersonResponseDto[] = [];
-  let searchWord: string;
  let searchFaces = false;
  let searchName = '';

+  $: showPeople = searchName ? searchedPeople : allPeople.filter((person) => !person.isHidden);
+
  const dispatch = createEventDispatcher<{
    close: void;
    createPerson: string | null;
@ -116,33 +110,6 @@
    isShowLoadingNewPerson = false;
    dispatch('createPerson', newFeaturePhoto);
  };
-
-  const searchPeople = async () => {
-    if ((searchedPeople.length < maximumLengthSearchPeople && searchName.startsWith(searchWord)) || searchName === '') {
-      return;
-    }
-    const timeout = setTimeout(() => (isShowLoadingSearch = true), timeBeforeShowLoadingSpinner);
-    try {
-      const data = await searchPerson({ name: searchName });
-      searchedPeople = data;
-      searchedPeopleCopy = data;
-      searchWord = searchName;
-    } catch (error) {
-      handleError(error, "Can't search people");
-    } finally {
-      clearTimeout(timeout);
-    }
-
-    isShowLoadingSearch = false;
-  };
-
-  $: {
-    searchedPeople = searchNameLocal(searchName, searchedPeopleCopy, 20);
-  }
-
-  const initInput = (element: HTMLInputElement) => {
-    element.focus();
-  };
 </script>

 <section
@ -200,13 +167,11 @@
        </div>
      </button>
      <div class="w-full flex">
-        <input
-          class="w-full gap-2 bg-immich-bg dark:bg-immich-dark-bg"
-          type="text"
-          placeholder="Name or nickname"
-          bind:value={searchName}
-          on:input={searchPeople}
-          use:initInput
+        <SearchPeople
+          type="input"
+          bind:searchName
+          bind:showLoadingSpinner={isShowLoadingSearch}
+          bind:searchedPeopleLocal={searchedPeople}
        />
        {#if isShowLoadingSearch}
          <div>
@ -227,56 +192,31 @@
  <div class="px-4 py-4 text-sm">
    <h2 class="mb-8 mt-4 uppercase">All people</h2>
    <div class="immich-scrollbar mt-4 flex flex-wrap gap-2 overflow-y-auto">
-      {#if searchName == ''}
-        {#each allPeople as person (person.id)}
-          {#if person.id !== editedPerson.id}
-            <div class="w-fit">
-              <button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
-                <div class="relative">
-                  <ImageThumbnail
-                    curve
-                    shadow
-                    url={getPeopleThumbnailUrl(person.id)}
-                    altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
-                    title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
-                    widthStyle="90px"
-                    heightStyle="90px"
-                    thumbhash={null}
-                    hidden={person.isHidden}
-                  />
-                </div>
+      {#each showPeople as person (person.id)}
+        {#if person.id !== editedPerson.id}
+          <div class="w-fit">
+            <button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
+              <div class="relative">
+                <ImageThumbnail
+                  curve
+                  shadow
+                  url={getPeopleThumbnailUrl(person.id)}
+                  altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
+                  title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
+                  widthStyle="90px"
+                  heightStyle="90px"
+                  thumbhash={null}
+                  hidden={person.isHidden}
+                />
+              </div>

-                <p class="mt-1 truncate font-medium" title={getPersonNameWithHiddenValue(person.name, person.isHidden)}>
-                  {person.name}
-                </p>
-              </button>
-            </div>
-          {/if}
-        {/each}
-      {:else}
-        {#each searchedPeople as person (person.id)}
-          {#if person.id !== editedPerson.id}
-            <div class="w-fit">
-              <button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
-                <div class="relative">
-                  <ImageThumbnail
-                    curve
-                    shadow
-                    url={getPeopleThumbnailUrl(person.id)}
-                    altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
-                    title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
-                    widthStyle="90px"
-                    heightStyle="90px"
-                    thumbhash={null}
-                    hidden={person.isHidden}
-                  />
-                </div>
-                <p class="mt-1 truncate font-medium" title={person.name}>{person.name}</p>
-              </button>
-            </div>
-          {/if}
-        {/each}
-      {/if}
+              <p class="mt-1 truncate font-medium" title={getPersonNameWithHiddenValue(person.name, person.isHidden)}>
+                {person.name}
+              </p>
+            </button>
+          </div>
+        {/if}
+      {/each}
    </div>
  </div>
 </section>
--- a/web/src/lib/components/faces-page/edit-name-input.svelte
+++ b/web/src/lib/components/faces-page/edit-name-input.svelte
@ -1,29 +1,23 @@
 <script lang="ts">
  import { type PersonResponseDto } from '@immich/sdk';
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
  import Button from '../elements/buttons/button.svelte';
+  import SearchPeople from '$lib/components/faces-page/people-search.svelte';

  export let person: PersonResponseDto;
  export let name: string;
-  export let suggestedPeople = false;
+  export let suggestedPeople: PersonResponseDto[];
  export let thumbnailData: string;
-
-  let inputElement: HTMLInputElement;
+  export let isSearchingPeople: boolean;

  const dispatch = createEventDispatcher<{
    change: string;
-    cancel: void;
-    input: void;
  }>();
-
-  onMount(() => {
-    inputElement.focus();
-  });
 </script>

 <div
-  class="flex w-full h-14 place-items-center {suggestedPeople
+  class="flex w-full h-14 place-items-center {suggestedPeople.length > 0
    ? 'rounded-t-lg dark:border-immich-dark-gray'
    : 'rounded-lg'}  bg-gray-100 p-2 dark:bg-gray-700"
 >
@ -33,13 +27,13 @@
    autocomplete="off"
    on:submit|preventDefault={() => dispatch('change', name)}
  >
-    <input
-      class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
-      type="text"
-      placeholder="New name or nickname"
-      bind:value={name}
-      bind:this={inputElement}
-      on:input={() => dispatch('input')}
+    <SearchPeople
+      bind:searchName={name}
+      bind:searchedPeopleLocal={suggestedPeople}
+      type="input"
+      numberPeopleToSearch={5}
+      inputClass="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
+      bind:showLoadingSpinner={isSearchingPeople}
    />
    <Button size="sm" type="submit">Done</Button>
  </form>
--- a/web/src/lib/components/faces-page/people-list.svelte
+++ b/web/src/lib/components/faces-page/people-list.svelte
@ -1,11 +1,8 @@
 <script lang="ts">
-  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
-  import { handleError } from '$lib/utils/handle-error';
-  import { searchNameLocal } from '$lib/utils/person';
-  import { searchPerson, type PersonResponseDto } from '@immich/sdk';
+  import { type PersonResponseDto } from '@immich/sdk';
  import { createEventDispatcher } from 'svelte';
  import FaceThumbnail from './face-thumbnail.svelte';
-  import SearchBar from '../elements/search-bar.svelte';
+  import SearchPeople from '$lib/components/faces-page/people-search.svelte';

  export let screenHeight: number;
  export let people: PersonResponseDto[];
@ -13,54 +10,26 @@
  export let unselectedPeople: PersonResponseDto[];

  let name = '';
-  let searchWord: string;
-  let isSearchingPeople = false;
+  let showPeople: PersonResponseDto[];

  let dispatch = createEventDispatcher<{
    select: PersonResponseDto;
  }>();

  $: {
-    people = peopleCopy.filter(
+    showPeople = people.filter(
      (person) => !unselectedPeople.some((unselectedPerson) => unselectedPerson.id === person.id),
    );
-    if (name) {
-      people = searchNameLocal(name, people, maximumLengthSearchPeople);
-    }
  }
-
-  const searchPeople = async (force: boolean) => {
-    if (name === '') {
-      people = peopleCopy;
-      return;
-    }
-    if (!force && people.length < maximumLengthSearchPeople && name.startsWith(searchWord)) {
-      return;
-    }
-
-    const timeout = setTimeout(() => (isSearchingPeople = true), timeBeforeShowLoadingSpinner);
-    try {
-      people = await searchPerson({ name });
-      searchWord = name;
-    } catch (error) {
-      handleError(error, "Can't search people");
-    } finally {
-      clearTimeout(timeout);
-    }
-
-    isSearchingPeople = false;
-  };
 </script>

 <div class=" w-40 sm:w-48 md:w-96 h-14 mb-8">
-  <SearchBar
-    bind:name
-    isSearching={isSearchingPeople}
+  <SearchPeople
+    type="searchBar"
    placeholder="Search people"
-    on:reset={() => {
-      people = peopleCopy;
-    }}
-    on:search={({ detail }) => searchPeople(detail.force ?? false)}
+    bind:searchName={name}
+    bind:searchedPeopleLocal={people}
+    onReset={() => (people = peopleCopy)}
  />
 </div>

@ -69,7 +38,7 @@
  style:max-height={screenHeight - 400 + 'px'}
 >
  <div class="grid-col-2 grid gap-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
-    {#each people as person (person.id)}
+    {#each showPeople as person (person.id)}
      <FaceThumbnail
        {person}
        on:click={() => {
--- a/web/src/lib/components/faces-page/people-search.svelte
+++ b/web/src/lib/components/faces-page/people-search.svelte
@ -0,0 +1,100 @@
+<script lang="ts">
+  import SearchBar from '$lib/components/elements/search-bar.svelte';
+  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
+  import { handleError } from '$lib/utils/handle-error';
+  import { searchNameLocal } from '$lib/utils/person';
+  import { searchPerson, type PersonResponseDto } from '@immich/sdk';
+
+  export let searchName: string;
+  export let searchedPeopleLocal: PersonResponseDto[];
+  export let type: 'searchBar' | 'input';
+  export let numberPeopleToSearch: number = maximumLengthSearchPeople;
+  export let inputClass: string = 'w-full gap-2 bg-immich-bg dark:bg-immich-dark-bg';
+  export let showLoadingSpinner: boolean = false;
+  export let placeholder: string = 'Name or nickname';
+  export let onReset = () => {};
+  export let onSearch = () => {};
+
+  let searchedPeople: PersonResponseDto[] = [];
+  let searchWord: string;
+  let abortController: AbortController | null = null;
+  let timeout: NodeJS.Timeout | null = null;
+
+  const search = () => {
+    searchedPeopleLocal = searchNameLocal(searchName, searchedPeople, numberPeopleToSearch);
+  };
+
+  const reset = () => {
+    searchedPeopleLocal = [];
+    cancelPreviousRequest();
+    onReset();
+  };
+
+  const cancelPreviousRequest = () => {
+    if (abortController) {
+      abortController.abort();
+      abortController = null;
+    }
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+
+  export let handleSearch = async (force?: boolean, name?: string) => {
+    searchName = name ?? searchName;
+    onSearch();
+    if (searchName === '') {
+      reset();
+      return;
+    }
+    if (!force && searchedPeople.length < maximumLengthSearchPeople && searchName.startsWith(searchWord)) {
+      search();
+      return;
+    }
+    cancelPreviousRequest();
+    abortController = new AbortController();
+    timeout = setTimeout(() => (showLoadingSpinner = true), timeBeforeShowLoadingSpinner);
+    try {
+      const data = await searchPerson({ name: searchName }, { signal: abortController?.signal });
+      searchedPeople = data;
+      searchWord = searchName;
+    } catch (error) {
+      handleError(error, "Can't search people");
+    } finally {
+      clearTimeout(timeout);
+      timeout = null;
+      abortController = null;
+      showLoadingSpinner = false;
+      search();
+    }
+  };
+
+  const initInput = (element: HTMLInputElement) => {
+    element.focus();
+  };
+
+  const handleReset = () => {
+    reset();
+    onReset();
+  };
+</script>
+
+{#if type === 'searchBar'}
+  <SearchBar
+    bind:name={searchName}
+    {showLoadingSpinner}
+    {placeholder}
+    on:reset={handleReset}
+    on:search={({ detail }) => handleSearch(detail.force ?? false)}
+  />
+{:else}
+  <input
+    class={inputClass}
+    type="text"
+    {placeholder}
+    bind:value={searchName}
+    on:input={() => handleSearch(false)}
+    use:initInput
+  />
+{/if}
--- a/web/src/lib/components/shared-components/change-location.svelte
+++ b/web/src/lib/components/shared-components/change-location.svelte
@ -23,7 +23,7 @@
  let suggestedPlaces: PlacesResponseDto[] = [];
  let searchWord: string;
  let latestSearchTimeout: number;
-  let showSpinner = false;
+  let showLoadingSpinner = false;
  let suggestionContainer: HTMLDivElement;
  let hideSuggestion = false;
  let addClipMapMarker: (long: number, lat: number) => void;
@ -74,14 +74,14 @@
    if (latestSearchTimeout) {
      clearTimeout(latestSearchTimeout);
    }
-    showSpinner = true;
+    showLoadingSpinner = true;
    const searchTimeout = window.setTimeout(() => {
      searchPlaces({ name: searchWord })
        .then((searchResult) => {
          // skip result when a newer search is happening
          if (latestSearchTimeout === searchTimeout) {
            places = searchResult;
-            showSpinner = false;
+            showLoadingSpinner = false;
          }
        })
        .catch((error) => {
@ -89,7 +89,7 @@
          if (latestSearchTimeout === searchTimeout) {
            places = [];
            handleError(error, "Can't search places");
-            showSpinner = false;
+            showLoadingSpinner = false;
          }
        });
    }, timeDebounceOnSearch);
@ -121,7 +121,7 @@
        <SearchBar
          placeholder="Search places"
          bind:name={searchWord}
-          isSearching={showSpinner}
+          {showLoadingSpinner}
          on:reset={() => {
            suggestedPlaces = [];
          }}
--- a/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
@ -56,7 +56,7 @@
    <div id="people-selection" class="-mb-4">
      <div class="flex items-center w-full justify-between gap-6">
        <p class="immich-form-label py-3">PEOPLE</p>
-        <SearchBar bind:name placeholder="Filter people" isSearching={false} />
+        <SearchBar bind:name placeholder="Filter people" showLoadingSpinner={false} />
      </div>

      <div class="flex -mx-1 max-h-64 gap-1 mt-2 flex-wrap overflow-y-auto immich-scrollbar">
--- a/web/src/lib/utils/navigation.ts
+++ b/web/src/lib/utils/navigation.ts
@ -81,6 +81,6 @@ export function navigate<T extends Route>(change: T): Promise<void> {
 export const clearQueryParam = async (queryParam: string, url: URL) => {
  if (url.searchParams.has(queryParam)) {
    url.searchParams.delete(queryParam);
-    await goto(url);
+    await goto(url, { keepFocus: true });
  }
 };
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@ -29,7 +29,7 @@
      />
    </div>
    <div class="w-60">
-      <SearchBar placeholder="Search albums" bind:name={searchQuery} isSearching={false} />
+      <SearchBar placeholder="Search albums" bind:name={searchQuery} showLoadingSpinner={false} />
    </div>
  </div>

--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@ -6,7 +6,6 @@
  import Icon from '$lib/components/elements/icon.svelte';
  import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
  import PeopleCard from '$lib/components/faces-page/people-card.svelte';
-  import SearchBar from '$lib/components/elements/search-bar.svelte';
  import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
  import ShowHide from '$lib/components/faces-page/show-hide.svelte';
  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
@ -15,16 +14,9 @@
    notificationController,
    NotificationType,
  } from '$lib/components/shared-components/notification/notification';
-  import {
-    ActionQueryParameterValue,
-    AppRoute,
-    maximumLengthSearchPeople,
-    QueryParameter,
-    timeBeforeShowLoadingSpinner,
-  } from '$lib/constants';
+  import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
  import { getPeopleThumbnailUrl } from '$lib/utils';
  import { handleError } from '$lib/utils/handle-error';
-  import { searchNameLocal } from '$lib/utils/person';
  import { shortcut } from '$lib/utils/shortcut';
  import {
    getPerson,
@ -40,6 +32,7 @@
  import type { PageData } from './$types';
  import { locale } from '$lib/stores/preferences.store';
  import { clearQueryParam } from '$lib/utils/navigation';
+  import SearchPeople from '$lib/components/faces-page/people-search.svelte';
  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';

  export let data: PageData;
@ -52,10 +45,7 @@
  let initialHiddenValues: Record<string, boolean> = {};
  let eyeColorMap: Record<string, 'black' | 'white'> = {};

-  let searchedPeople: PersonResponseDto[] = [];
  let searchName = '';
-  let searchWord: string;
-  let isSearchingPeople = false;

  let showLoadingSpinner = false;
  let toggleVisibility = false;
@ -68,29 +58,31 @@
  let personMerge2: PersonResponseDto;
  let potentialMergePeople: PersonResponseDto[] = [];
  let edittingPerson: PersonResponseDto | null = null;
+  let searchedPeopleLocal: PersonResponseDto[] = [];
+  let handleSearchPeople: (force?: boolean, name?: string) => Promise<void>;

  let innerHeight: number;

  for (const person of people) {
    initialHiddenValues[person.id] = person.isHidden;
  }
-
-  $: searchedPeopleLocal = searchName ? searchNameLocal(searchName, searchedPeople, maximumLengthSearchPeople) : [];
-
+  $: showPeople = searchName ? searchedPeopleLocal : people.filter((person) => !person.isHidden);
  $: countVisiblePeople = countTotalPeople - countHiddenPeople;

  onMount(async () => {
    const getSearchedPeople = $page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
    if (getSearchedPeople) {
      searchName = getSearchedPeople;
-      await handleSearchPeople(true);
+      await handleSearchPeople(true, searchName);
    }
  });

-  const handleSearch = async (force: boolean) => {
-    $page.url.searchParams.set(QueryParameter.SEARCHED_PEOPLE, searchName);
-    await goto($page.url, { keepFocus: true });
-    await handleSearchPeople(force);
+  const handleSearch = async () => {
+    const getSearchedPeople = $page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
+    if (getSearchedPeople !== searchName) {
+      $page.url.searchParams.set(QueryParameter.SEARCHED_PEOPLE, searchName);
+      await goto($page.url, { keepFocus: true });
+    }
  };

  const handleCloseClick = () => {
@ -278,28 +270,6 @@
    );
  };

-  const handleSearchPeople = async (force: boolean) => {
-    if (searchName === '') {
-      await clearQueryParam(QueryParameter.SEARCHED_PEOPLE, $page.url);
-      return;
-    }
-    if (!force && people.length < maximumLengthSearchPeople && searchName.startsWith(searchWord)) {
-      return;
-    }
-
-    const timeout = setTimeout(() => (isSearchingPeople = true), timeBeforeShowLoadingSpinner);
-    try {
-      searchedPeople = await searchPerson({ name: searchName, withHidden: false });
-      searchWord = searchName;
-    } catch (error) {
-      handleError(error, "Can't search people");
-    } finally {
-      clearTimeout(timeout);
-    }
-
-    isSearchingPeople = false;
-  };
-
  const submitNameChange = async () => {
    potentialMergePeople = [];
    showChangeNameModal = false;
@ -393,7 +363,6 @@
  };

  const onResetSearchBar = async () => {
-    searchedPeople = [];
    await clearQueryParam(QueryParameter.SEARCHED_PEOPLE, $page.url);
  };
 </script>
@ -420,12 +389,14 @@
      <div class="flex gap-2 items-center justify-center">
        <div class="hidden sm:block">
          <div class="w-40 lg:w-80 h-10">
-            <SearchBar
-              bind:name={searchName}
-              isSearching={isSearchingPeople}
+            <SearchPeople
+              type="searchBar"
              placeholder="Search people"
-              on:reset={onResetSearchBar}
-              on:search={({ detail }) => handleSearch(detail.force ?? false)}
+              onReset={onResetSearchBar}
+              onSearch={handleSearch}
+              bind:searchName
+              bind:searchedPeopleLocal
+              bind:handleSearch={handleSearchPeople}
            />
          </div>
        </div>
@ -441,31 +412,16 @@

  {#if countVisiblePeople > 0 && (!searchName || searchedPeopleLocal.length > 0)}
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9 gap-1">
-      {#if searchName}
-        {#each searchedPeopleLocal as person, index (person.id)}
-          <PeopleCard
-            {person}
-            preload={index < 20}
-            on:change-name={() => handleChangeName(person)}
-            on:set-birth-date={() => handleSetBirthDate(person)}
-            on:merge-people={() => handleMergePeople(person)}
-            on:hide-person={() => handleHidePerson(person)}
-          />
-        {/each}
-      {:else}
-        {#each people as person, index (person.id)}
-          {#if !person.isHidden}
-            <PeopleCard
-              {person}
-              preload={index < 20}
-              on:change-name={() => handleChangeName(person)}
-              on:set-birth-date={() => handleSetBirthDate(person)}
-              on:merge-people={() => handleMergePeople(person)}
-              on:hide-person={() => handleHidePerson(person)}
-            />
-          {/if}
-        {/each}
-      {/if}
+      {#each showPeople as person, index (person.id)}
+        <PeopleCard
+          {person}
+          preload={index < 20}
+          on:change-name={() => handleChangeName(person)}
+          on:set-birth-date={() => handleSetBirthDate(person)}
+          on:merge-people={() => handleMergePeople(person)}
+          on:hide-person={() => handleHidePerson(person)}
+        />
+      {/each}
    </div>
  {:else}
    <div class="flex min-h-[calc(66vh_-_11rem)] w-full place-content-center items-center dark:text-white">
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -26,7 +26,7 @@
    NotificationType,
    notificationController,
  } from '$lib/components/shared-components/notification/notification';
-  import { AppRoute, QueryParameter, maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
+  import { AppRoute, QueryParameter } from '$lib/constants';
  import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { AssetStore } from '$lib/stores/assets.store';
@ -35,7 +35,6 @@
  import { clickOutside } from '$lib/utils/click-outside';
  import { handleError } from '$lib/utils/handle-error';
  import { isExternalUrl } from '$lib/utils/navigation';
-  import { searchNameLocal } from '$lib/utils/person';
  import {
    getPersonStatistics,
    mergePerson,
@ -103,37 +102,12 @@
   * However, it needs to make a new api request if searching 'r' returns 20 names (arbitrary value, the limit sent back by the server).
   * or if the new search word starts with another word / letter
   **/
-  let searchWord: string;
  let isSearchingPeople = false;
  let suggestionContainer: HTMLDivElement;

-  const searchPeople = async () => {
-    if ((people.length < maximumLengthSearchPeople && name.startsWith(searchWord)) || name === '') {
-      return;
-    }
-    const timeout = setTimeout(() => (isSearchingPeople = true), timeBeforeShowLoadingSpinner);
-    try {
-      people = await searchPerson({ name });
-      searchWord = name;
-    } catch (error) {
-      people = [];
-      handleError(error, "Can't search people");
-    } finally {
-      clearTimeout(timeout);
-    }
-
-    isSearchingPeople = false;
-  };
-
  $: isAllArchive = [...$selectedAssets].every((asset) => asset.isArchived);
  $: isAllFavorite = [...$selectedAssets].every((asset) => asset.isFavorite);

-  $: {
-    if (people) {
-      suggestedPeople = name ? searchNameLocal(name, people, 5, data.person.id) : [];
-    }
-  }
-
  onMount(() => {
    const action = $page.url.searchParams.get(QueryParameter.ACTION);
    const getPreviousRoute = $page.url.searchParams.get(QueryParameter.PREVIOUS_ROUTE);
@ -480,10 +454,10 @@
            {#if isEditingName}
              <EditNameInput
                person={data.person}
-                suggestedPeople={suggestedPeople.length > 0 || isSearchingPeople}
+                bind:suggestedPeople
                bind:name
+                bind:isSearchingPeople
                on:change={(event) => handleNameChange(event.detail)}
-                on:input={searchPeople}
                {thumbnailData}
              />
            {:else}