fix: use loading spinner for library spinner (#6116)

This commit is contained in:
martin 2024-01-02 04:10:48 +01:00 committed by GitHub
parent 9a04014f98
commit c24d0e82bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 10 deletions

6
web/package-lock.json generated
View File

@ -21,7 +21,6 @@
"luxon": "^3.2.1", "luxon": "^3.2.1",
"maplibre-gl": "^3.6.0", "maplibre-gl": "^3.6.0",
"socket.io-client": "^4.6.1", "socket.io-client": "^4.6.1",
"svelte-loading-spinners": "^0.3.4",
"svelte-local-storage-store": "^0.6.0", "svelte-local-storage-store": "^0.6.0",
"svelte-maplibre": "^0.7.0", "svelte-maplibre": "^0.7.0",
"thumbhash": "^0.1.1" "thumbhash": "^0.1.1"
@ -6862,11 +6861,6 @@
"svelte": "^3.19.0 || ^4.0.0" "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": { "node_modules/svelte-local-storage-store": {
"version": "0.6.4", "version": "0.6.4",
"resolved": "https://registry.npmjs.org/svelte-local-storage-store/-/svelte-local-storage-store-0.6.4.tgz", "resolved": "https://registry.npmjs.org/svelte-local-storage-store/-/svelte-local-storage-store-0.6.4.tgz",

View File

@ -67,7 +67,6 @@
"luxon": "^3.2.1", "luxon": "^3.2.1",
"maplibre-gl": "^3.6.0", "maplibre-gl": "^3.6.0",
"socket.io-client": "^4.6.1", "socket.io-client": "^4.6.1",
"svelte-loading-spinners": "^0.3.4",
"svelte-local-storage-store": "^0.6.0", "svelte-local-storage-store": "^0.6.0",
"svelte-maplibre": "^0.7.0", "svelte-maplibre": "^0.7.0",
"thumbhash": "^0.1.1" "thumbhash": "^0.1.1"

View File

@ -1,7 +1,13 @@
<script lang="ts">
export let size: string = '24';
</script>
<div> <div>
<svg <svg
role="status" 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" viewBox="0 0 100 101"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

View File

@ -7,7 +7,6 @@
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.svelte';
import Pulse from 'svelte-loading-spinners/Pulse.svelte';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import LibraryImportPathsForm from '../forms/library-import-paths-form.svelte'; import LibraryImportPathsForm from '../forms/library-import-paths-form.svelte';
import LibraryScanSettingsForm from '../forms/library-scan-settings-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 MenuOption from '../shared-components/context-menu/menu-option.svelte';
import { getContextMenuPosition } from '$lib/utils/context-menu'; import { getContextMenuPosition } from '$lib/utils/context-menu';
import { mdiDatabase, mdiDotsVertical, mdiUpload } from '@mdi/js'; import { mdiDatabase, mdiDotsVertical, mdiUpload } from '@mdi/js';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
let libraries: LibraryResponseDto[] = []; let libraries: LibraryResponseDto[] = [];
@ -323,7 +323,7 @@
<td class="w-1/3 text-ellipsis px-4 text-sm">{library.name}</td> <td class="w-1/3 text-ellipsis px-4 text-sm">{library.name}</td>
{#if totalCount[index] == undefined} {#if totalCount[index] == undefined}
<td colspan="2" class="flex w-1/3 items-center justify-center text-ellipsis px-4 text-sm"> <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> </td>
{:else} {:else}
<td class="w-1/6 text-ellipsis px-4 text-sm"> <td class="w-1/6 text-ellipsis px-4 text-sm">