chore: show loading state when fetching users

web/src/lib/modals/AlbumAddUsersModal.svelte

@@ -2,7 +2,7 @@
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { handleAddUsersToAlbum } from '$lib/services/album.service';
   import { searchUsers, type AlbumResponseDto, type UserResponseDto } from '@immich/sdk';
-  import { FormModal, ListButton, Stack, Text } from '@immich/ui';
+  import { FormModal, ListButton, LoadingSpinner, Stack, Text } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { SvelteMap } from 'svelte/reactivity';
@@ -18,6 +18,7 @@
   const excludedUserIds = $derived([album.ownerId, ...album.albumUsers.map(({ user: { id } }) => id)]);
   const filteredUsers = $derived(users.filter(({ id }) => !excludedUserIds.includes(id)));
   const selectedUsers = new SvelteMap<string, UserResponseDto>();
+  let loading = $state(true);
 
   const handleToggle = (user: UserResponseDto) => {
     if (selectedUsers.has(user.id)) {
@@ -36,6 +37,7 @@
 
   onMount(async () => {
     users = await searchUsers();
+    loading = false;
   });
 </script>
 
@@ -47,17 +49,23 @@
   disabled={selectedUsers.size === 0}
   {onClose}
 >
-  <Stack>
-    {#each filteredUsers as user (user.id)}
-      <ListButton selected={selectedUsers.has(user.id)} onclick={() => handleToggle(user)}>
-        <UserAvatar {user} size="md" />
-        <div class="text-start grow">
-          <Text fontWeight="medium">{user.name}</Text>
-          <Text size="tiny" color="muted">{user.email}</Text>
-        </div>
-      </ListButton>
-    {:else}
-      <Text class="py-6">{$t('album_share_no_users')}</Text>
-    {/each}
-  </Stack>
+  {#if loading}
+    <div class="w-full flex place-items-center place-content-center">
+      <LoadingSpinner />
+    </div>
+  {:else}
+    <Stack>
+      {#each filteredUsers as user (user.id)}
+        <ListButton selected={selectedUsers.has(user.id)} onclick={() => handleToggle(user)}>
+          <UserAvatar {user} size="md" />
+          <div class="text-start grow">
+            <Text fontWeight="medium">{user.name}</Text>
+            <Text size="tiny" color="muted">{user.email}</Text>
+          </div>
+        </ListButton>
+      {:else}
+        <Text class="py-6">{$t('album_share_no_users')}</Text>
+      {/each}
+    </Stack>
+  {/if}
 </FormModal>

web/src/lib/modals/PartnerSelectionModal.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { getPartners, PartnerDirection, searchUsers, type UserResponseDto } from '@immich/sdk';
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
-  import { onMount } from 'svelte';
+  import { Button, LoadingSpinner, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -15,7 +14,7 @@
   let availableUsers: UserResponseDto[] = $state([]);
   let selectedUsers: UserResponseDto[] = $state([]);
 
-  onMount(async () => {
+  const getAvailableUsers = async () => {
     let users = await searchUsers();
 
     // remove current user
@@ -25,7 +24,7 @@
     const partners = await getPartners({ direction: PartnerDirection.SharedBy });
     const partnerIds = new Set(partners.map((partner) => partner.id));
     availableUsers = users.filter((user) => !partnerIds.has(user.id));
-  });
+  };
 
   const selectUser = (user: UserResponseDto) => {
     selectedUsers = selectedUsers.includes(user)
@@ -36,44 +35,50 @@
 
 <Modal title={$t('add_partner')} {onClose} size="small">
   <ModalBody>
-    <div class="immich-scrollbar max-h-75 overflow-y-auto">
+    {#await getAvailableUsers()}
+      <div class="w-full flex place-items-center place-content-center">
+        <LoadingSpinner />
+      </div>
+    {:then _}
       {#if availableUsers.length > 0}
-        {#each availableUsers as user (user.id)}
-          <button
-            type="button"
-            onclick={() => selectUser(user)}
-            class="flex w-full place-items-center gap-4 px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
-          >
-            {#if selectedUsers.includes(user)}
-              <span
-                class="flex h-12 w-12 place-content-center place-items-center rounded-full border bg-immich-primary text-3xl text-white dark:border-immich-dark-gray dark:bg-immich-dark-primary dark:text-immich-dark-bg"
-                >✓</span
-              >
-            {:else}
-              <UserAvatar {user} size="lg" />
-            {/if}
+        <div class="immich-scrollbar max-h-75 overflow-y-auto">
+          {#each availableUsers as user (user.id)}
+            <button
+              type="button"
+              onclick={() => selectUser(user)}
+              class="flex w-full place-items-center gap-4 px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
+            >
+              {#if selectedUsers.includes(user)}
+                <span
+                  class="flex h-12 w-12 place-content-center place-items-center rounded-full border bg-immich-primary text-3xl text-white dark:border-immich-dark-gray dark:bg-immich-dark-primary dark:text-immich-dark-bg"
+                  >✓</span
+                >
+              {:else}
+                <UserAvatar {user} size="lg" />
+              {/if}
 
-            <div class="text-start">
-              <p class="text-immich-fg dark:text-immich-dark-fg">
-                {user.name}
-              </p>
-              <p class="text-xs">
-                {user.email}
-              </p>
-            </div>
-          </button>
-        {/each}
+              <div class="text-start">
+                <p class="text-immich-fg dark:text-immich-dark-fg">
+                  {user.name}
+                </p>
+                <p class="text-xs">
+                  {user.email}
+                </p>
+              </div>
+            </button>
+          {/each}
+
+          <ModalFooter>
+            {#if selectedUsers.length > 0}
+              <Button shape="round" fullWidth onclick={() => onClose(selectedUsers)}>{$t('add')}</Button>
+            {/if}
+          </ModalFooter>
+        </div>
       {:else}
         <p class="py-5 text-sm">
           {$t('photo_shared_all_users')}
         </p>
       {/if}
-
-      <ModalFooter>
-        {#if selectedUsers.length > 0}
-          <Button shape="round" fullWidth onclick={() => onClose(selectedUsers)}>{$t('add')}</Button>
-        {/if}
-      </ModalFooter>
-    </div>
+    {/await}
   </ModalBody>
 </Modal>