Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-27 08:49:36 +02:00
Code Issues Releases Activity

immich: Add a loading indicator

Browse source
This commit is contained in:
Thies 2025-01-30 12:46:03 +01:00
parent 08bfeac837
commit c7d34f6c48
No known key found for this signature in database
1 changed files with 11 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/lib/components/ImmichSelect.svelte
View file

@ -4,11 +4,12 @@
import type { Adventure, ImmichAlbum } from '$lib/types'; import type { Adventure, ImmichAlbum } from '$lib/types';
import { debounce } from '$lib'; import { debounce } from '$lib';
let immichImages: any[] = [];
let immichSearchValue: string = ''; let immichSearchValue: string = '';
let searchCategory: 'search' | 'date' | 'album' = 'search'; let searchCategory: 'search' | 'date' | 'album' = 'search';
let immichError: string = ''; let immichError: string = '';
let immichNextURL: string = ''; let immichNextURL: string = '';
let loading = false; // TODO: Implement loading indicator let loading = false;
export let adventure: Adventure | null = null; export let adventure: Adventure | null = null;
@ -61,11 +62,8 @@
} else { } else {
immichError = $t('immich.no_items_found'); immichError = $t('immich.no_items_found');
} }
if (data.next) {
immichNextURL = data.next; immichNextURL = data.next || '';
} else {
immichNextURL = '';
}
} }
} finally { } finally {
loading = false; loading = false;
@ -84,9 +82,7 @@
} }
}); });
let immichImages: any[] = [];
function buildQueryParams() { function buildQueryParams() {
let params = new URLSearchParams(); let params = new URLSearchParams();
if (immichSearchValue && searchCategory === 'search') { if (immichSearchValue && searchCategory === 'search') {
@ -167,8 +163,14 @@
<p class="text-red-500">{immichError}</p> <p class="text-red-500">{immichError}</p>
<div class="flex flex-wrap gap-4 mr-4 mt-2"> <div class="flex flex-wrap gap-4 mr-4 mt-2">
{#if loading}
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[100] w-24 h-24">
<span class="loading loading-spinner w-24 h-24"></span>
</div>
{/if}
{#each immichImages as image} {#each immichImages as image}
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2" class:blur-sm={loading}>
<!-- svelte-ignore a11y-img-redundant-alt --> <!-- svelte-ignore a11y-img-redundant-alt -->
<img <img
src={`/immich/${image.id}`} src={`/immich/${image.id}`}