Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-02-04 01:09:14 -05:00
Code Issues Activity

Added 2-stage loading for album's thumbnail

Browse source
This commit is contained in:
Alex Tran 2022-07-26 22:06:06 -05:00
parent 03457f5d32
commit 59c1ea3097
No known key found for this signature in database
GPG key ID: E4954BC787B85C8A
1 changed files with 8 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
web/src/lib/components/album-page/album-card.svelte
View file

@ -10,12 +10,12 @@
let imageData: string = '/no-thumbnail.png'; let imageData: string = '/no-thumbnail.png';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const loadImageData = async (thubmnailId: string | null) => { const loadHighQualityThumbnail = async (thubmnailId: string | null) => {
if (thubmnailId == null) { if (thubmnailId == null) {
return '/no-thumbnail.png'; return '/no-thumbnail.png';
} }
const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Webp, { const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Jpeg, {
responseType: 'blob' responseType: 'blob'
}); });
if (data instanceof Blob) { if (data instanceof Blob) {
@ -50,15 +50,14 @@
</div> </div>
<div class={`h-[275px] w-[275px] z-[-1]`}> <div class={`h-[275px] w-[275px] z-[-1]`}>
{#await loadImageData(album.albumThumbnailAssetId)} {#await loadHighQualityThumbnail(album.albumThumbnailAssetId)}
<div <img
class={`bg-immich-primary/10 w-full h-full flex place-items-center place-content-center rounded-xl`} 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`}
</div> />
{:then imageData} {:then imageData}
<img <img
in:fade={{ duration: 250 }}
src={imageData} src={imageData}
alt={album.id} alt={album.id}
class={`object-cover w-full h-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`} class={`object-cover w-full h-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}