self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00
Code Issues Releases Activity

Load low- and high quality thumbnail in the same img tag to avoid flickering (#413)

Browse Source
This commit is contained in:
Matthias Rupp 2022-07-31 22:56:03 +02:00 committed by GitHub
parent dc61fd925f
commit 0ac9fe5a54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/lib/components/album-page/album-card.svelte
View File

@ -7,20 +7,20 @@
export let album: AlbumResponseDto;
let imageData: string = '/no-thumbnail.png';
let imageData: string = `/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=${ThumbnailFormat.Webp}`;
const dispatch = createEventDispatcher();
const loadHighQualityThumbnail = async (thubmnailId: string | null) => {
if (thubmnailId == null) {
return '/no-thumbnail.png';
return;
}
const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Jpeg, {
responseType: 'blob'
});
if (data instanceof Blob) {
imageData = URL.createObjectURL(data);
return imageData;
return URL.createObjectURL(data);
}
};
@ -30,6 +30,10 @@
y: e.clientY
});
};
onMount(async () => {
imageData = await loadHighQualityThumbnail(album.albumThumbnailAssetId) || 'no-thumbnail.png';
});
</script>
<div
@ -50,19 +54,11 @@
</div>
<div class={`h-[275px] w-[275px] z-[-1]`}>
{#await loadHighQualityThumbnail(album.albumThumbnailAssetId)}
<img
src={`/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=${ThumbnailFormat.Webp}`}
alt={album.id}
class={`object-cover w-full h-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
/>
{:then imageData}
<img
src={imageData}
alt={album.id}
class={`object-cover w-full h-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
class={`object-cover h-full w-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
/>
{/await}
</div>
<div class="mt-4">