refactor: buttons (#18317)

* refactor: buttons

* fix: woopsie

---------

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>

web/src/lib/components/faces-page/manage-people-visibility.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import Button from '$lib/components/elements/buttons/button.svelte';
   import PeopleInfiniteScroll from '$lib/components/faces-page/people-infinite-scroll.svelte';
-  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import {
     notificationController,
     NotificationType,
@@ -13,6 +11,7 @@
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { updatePeople, type PersonResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
   import { mdiClose, mdiEye, mdiEyeOff, mdiEyeSettings, mdiRestart } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
@@ -126,11 +125,7 @@
       <CircleIconButton title={$t('reset_people_visibility')} icon={mdiRestart} onclick={handleResetVisibility} />
       <CircleIconButton title={toggleButton.label} icon={toggleButton.icon} onclick={handleToggleVisibility} />
     </div>
-    {#if !showLoadingSpinner}
-      <Button onclick={handleSaveVisibility} size="sm" rounded="lg">{$t('done')}</Button>
-    {:else}
-      <LoadingSpinner />
-    {/if}
+    <Button loading={showLoadingSpinner} onclick={handleSaveVisibility} size="small">{$t('done')}</Button>
   </div>
 </div>