From 59c1ea309727c63533655759c006d52052365b18 Mon Sep 17 00:00:00 2001 From: Alex Tran Date: Tue, 26 Jul 2022 22:06:06 -0500 Subject: [PATCH] Added 2-stage loading for album's thumbnail --- .../lib/components/album-page/album-card.svelte | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/web/src/lib/components/album-page/album-card.svelte b/web/src/lib/components/album-page/album-card.svelte index befd721bcd..976a59fa85 100644 --- a/web/src/lib/components/album-page/album-card.svelte +++ b/web/src/lib/components/album-page/album-card.svelte @@ -10,12 +10,12 @@ let imageData: string = '/no-thumbnail.png'; const dispatch = createEventDispatcher(); - const loadImageData = async (thubmnailId: string | null) => { + const loadHighQualityThumbnail = async (thubmnailId: string | null) => { if (thubmnailId == null) { return '/no-thumbnail.png'; } - const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Webp, { + const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Jpeg, { responseType: 'blob' }); if (data instanceof Blob) { @@ -50,15 +50,14 @@
- {#await loadImageData(album.albumThumbnailAssetId)} -
- ... -
+ {#await loadHighQualityThumbnail(album.albumThumbnailAssetId)} + {album.id} {:then imageData}