From 128d653fc619be4ead3483b9d40ce6043ff21df6 Mon Sep 17 00:00:00 2001
From: Curtis Lowder <cwlowder@users.noreply.github.com>
Date: Wed, 26 Feb 2025 21:06:41 -0600
Subject: [PATCH] fix(web): update search modal to not jump around (#16308)

* fix(web): update search modal to not jump around

Search People selection will change size while loading. This causes the
search modal to jump around as the people load in.

* loading spinner size

* remove unsued code

---------

Co-authored-by: cwlowder <me@curtislowder.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../search-bar/search-people-section.svelte              | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git 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
index d06c4dc5c0d..ed17d78af30 100644
--- 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
@@ -10,6 +10,7 @@
   import { t } from 'svelte-i18n';
   import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
   import type { SvelteSet } from 'svelte/reactivity';
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
 
   interface Props {
     selectedPeople: SvelteSet<string>;
@@ -52,13 +53,17 @@
   };
 </script>
 
-{#await peoplePromise then people}
+{#await peoplePromise}
+  <div id="spinner" class="flex h-60 items-center justify-center -mb-4">
+    <LoadingSpinner size="24" />
+  </div>
+{:then people}
   {#if people && people.length > 0}
     {@const peopleList = showAllPeople
       ? filterPeople(people, name)
       : filterPeople(people, name).slice(0, numberOfPeople)}
 
-    <div id="people-selection" class="-mb-4">
+    <div id="people-selection" class="h-60 -mb-4">
       <div class="flex items-center w-full justify-between gap-6">
         <p class="immich-form-label py-3">{$t('people').toUpperCase()}</p>
         <SearchBar bind:name placeholder={$t('filter_people')} showLoadingSpinner={false} />