From c24d0e82bb97de6f4aa237de866ef3e093573a0f Mon Sep 17 00:00:00 2001
From: martin <74269598+martabal@users.noreply.github.com>
Date: Tue, 2 Jan 2024 04:10:48 +0100
Subject: [PATCH] fix: use loading spinner for library spinner (#6116)

---
 web/package-lock.json                                     | 6 ------
 web/package.json                                          | 1 -
 .../components/shared-components/loading-spinner.svelte   | 8 +++++++-
 .../lib/components/user-settings-page/library-list.svelte | 4 ++--
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 998b483f37..25fc901079 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -21,7 +21,6 @@
         "luxon": "^3.2.1",
         "maplibre-gl": "^3.6.0",
         "socket.io-client": "^4.6.1",
-        "svelte-loading-spinners": "^0.3.4",
         "svelte-local-storage-store": "^0.6.0",
         "svelte-maplibre": "^0.7.0",
         "thumbhash": "^0.1.1"
@@ -6862,11 +6861,6 @@
         "svelte": "^3.19.0 || ^4.0.0"
       }
     },
-    "node_modules/svelte-loading-spinners": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/svelte-loading-spinners/-/svelte-loading-spinners-0.3.4.tgz",
-      "integrity": "sha512-vKaW71QMCBcTNijAGc0mUl8k3DQ66iYmp6MB8BMGCXyWk82bTrcLy8FOnSm9fE+8q6TwzD6PLUoYFHt0II93Xw=="
-    },
     "node_modules/svelte-local-storage-store": {
       "version": "0.6.4",
       "resolved": "https://registry.npmjs.org/svelte-local-storage-store/-/svelte-local-storage-store-0.6.4.tgz",
diff --git a/web/package.json b/web/package.json
index 862ef621b7..d2a66a5f27 100644
--- a/web/package.json
+++ b/web/package.json
@@ -67,7 +67,6 @@
     "luxon": "^3.2.1",
     "maplibre-gl": "^3.6.0",
     "socket.io-client": "^4.6.1",
-    "svelte-loading-spinners": "^0.3.4",
     "svelte-local-storage-store": "^0.6.0",
     "svelte-maplibre": "^0.7.0",
     "thumbhash": "^0.1.1"
diff --git a/web/src/lib/components/shared-components/loading-spinner.svelte b/web/src/lib/components/shared-components/loading-spinner.svelte
index a285f5b480..7835e17310 100644
--- a/web/src/lib/components/shared-components/loading-spinner.svelte
+++ b/web/src/lib/components/shared-components/loading-spinner.svelte
@@ -1,7 +1,13 @@
+<script lang="ts">
+  export let size: string = '24';
+</script>
+
 <div>
   <svg
     role="status"
-    class={`h-[24px] w-[24px] animate-spin fill-immich-primary text-gray-400 dark:text-gray-600`}
+    style:height="{size}px"
+    style:width="{size}px"
+    class="animate-spin fill-immich-primary text-gray-400 dark:text-gray-600"
     viewBox="0 0 100 101"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/web/src/lib/components/user-settings-page/library-list.svelte b/web/src/lib/components/user-settings-page/library-list.svelte
index d134604c6c..2b2aba8817 100644
--- a/web/src/lib/components/user-settings-page/library-list.svelte
+++ b/web/src/lib/components/user-settings-page/library-list.svelte
@@ -7,7 +7,6 @@
   import { handleError } from '$lib/utils/handle-error';
   import { fade } from 'svelte/transition';
   import Icon from '$lib/components/elements/icon.svelte';
-  import Pulse from 'svelte-loading-spinners/Pulse.svelte';
   import { slide } from 'svelte/transition';
   import LibraryImportPathsForm from '../forms/library-import-paths-form.svelte';
   import LibraryScanSettingsForm from '../forms/library-scan-settings-form.svelte';
@@ -18,6 +17,7 @@
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
   import { mdiDatabase, mdiDotsVertical, mdiUpload } from '@mdi/js';
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
 
   let libraries: LibraryResponseDto[] = [];
 
@@ -323,7 +323,7 @@
               <td class="w-1/3 text-ellipsis px-4 text-sm">{library.name}</td>
               {#if totalCount[index] == undefined}
                 <td colspan="2" class="flex w-1/3 items-center justify-center text-ellipsis px-4 text-sm">
-                  <Pulse color="gray" size="40" unit="px" />
+                  <LoadingSpinner size="40" />
                 </td>
               {:else}
                 <td class="w-1/6 text-ellipsis px-4 text-sm">