update avatar/banner loading

frontend/src/lib/components/Avatar.svelte

@@ -26,7 +26,6 @@
 
 		img.onload = () => {
 			loading = false;
-			console.log('loaded');
 			loaded = true;
 		};
 		img.onerror = () => {
@@ -41,7 +40,7 @@
 </script>
 
 {#if loaded}
-	<img {src} class="ratio-square w-full h-full rounded-full object-cover" />
+	<img {src} class="ratio-square w-full h-full rounded-full object-cover" alt="avatar" />
 {:else if loading}
 	<div class="bg-white/20 w-full h-full rounded-full" />
 {/if}

frontend/src/lib/components/Image.svelte

@@ -0,0 +1,58 @@
+<script>
+	import { ProgressBar } from '@skeletonlabs/skeleton';
+	import { onMount, beforeUpdate, afterUpdate, createEventDispatcher } from 'svelte';
+
+	export let src;
+	export let divClass = '';
+	export let imgClass = '';
+
+	const dispatch = createEventDispatcher();
+
+	let loaded = false;
+	let failed = false;
+	let loading = false;
+	let last = src;
+
+	let img;
+
+	beforeUpdate(() => {
+		if (src !== last) {
+			img.src = src;
+			last = src;
+			loading = true;
+			loaded = false;
+			console.log('loading again');
+		}
+	});
+
+	function processImage() {
+		img = new Image();
+		img.src = src;
+		loading = true;
+
+		img.onload = () => {
+			loading = false;
+			loaded = true;
+
+			dispatch('load', {});
+		};
+		img.onerror = () => {
+			loading = false;
+			failed = true;
+		};
+	}
+
+	onMount(() => {
+		processImage();
+	});
+</script>
+
+<div class={divClass}>
+	{#if loaded}
+		<img {src} class="w-full h-full {imgClass}" alt="image" />
+	{:else if loading}
+		<div class="w-full h-full p-8">
+			<ProgressBar />
+		</div>
+	{/if}
+</div>

frontend/src/lib/components/Table.svelte

@@ -116,7 +116,7 @@
 		</thead>
 		<!-- Body -->
 		<tbody class="table-body {regionBody}">
-			{#each source.body as row, rowIndex}
+			{#each source.body as row, rowIndex (source.meta[rowIndex][0])}
 				<!-- Row -->
 				<!-- prettier-ignore -->
 				<tr

frontend/src/lib/components/UserList.svelte

@@ -30,7 +30,7 @@
 								id="image-{item.did}"
 								src={item.repo?.profile?.avatar?.ref?.$link
 									? blobUrl(item.did, item.repo?.profile?.avatar?.ref?.$link) +
-									  '?format=webp&size=160'
+									  '?format=webp&width=160'
 									: '/avatar.svg'}
 							/>
 						</a>

frontend/src/routes/[id]/+page.svelte

@@ -16,6 +16,7 @@
 	import BlobInfo from '$lib/components/BlobInfo.svelte';
 	import { onMount } from 'svelte';
 	import { requestBlob } from '$lib/api';
+	import Image from '$lib/components/Image.svelte';
 
 	export let data;
 
@@ -158,15 +159,17 @@
 				historyTable = renderTable();
 			}
 		})();
-		['avatar', 'banner'].map(async (t) => {
-			if (item.repo?.profile && item.repo?.profile[t]) {
-				blobInfo[t] = await requestBlob(
-					fetch,
-					`/${item.did}/${item.repo.profile[t].ref.$link}/inspect`
-				);
-			}
-		});
 	});
+
+	async function loadBlobInfo(t) {
+		console.log('xxx');
+		if (item.repo?.profile && item.repo?.profile[t]) {
+			blobInfo[t] = await requestBlob(
+				fetch,
+				`/${item.did}/${item.repo.profile[t].ref.$link}/inspect`
+			);
+		}
+	}
 </script>
 
 <BasicPage {data} title={item.did} noHeader="true" {breadcrumb}>
@@ -208,32 +211,27 @@
 						<th class="text-right">Description</th>
 						<td>{item.repo.profile.description || '-'}</td>
 					</tr>
-					{#if item.repo.profile.avatar}
-						<tr>
-							<th class="text-right">Avatar</th>
-							<td>
-								<div class="flex">
-									<img
-										src={blobUrl(item.did, item.repo.profile.avatar.ref.$link) +
-											'?format=webp&size=160'}
-										class="w-40"
-									/>
-									<BlobInfo data={blobInfo.avatar} />
-								</div>
-							</td>
-						</tr>
-					{/if}
-					{#if item.repo.profile.banner}
-						<tr>
-							<th class="text-right">Banner</th>
-							<td
-								><div class="flex">
-									<img src={blobUrl(item.did, item.repo.profile.banner.ref.$link)} class="w-40" />
-									<BlobInfo data={blobInfo.banner} />
-								</div>
-							</td>
-						</tr>
-					{/if}
+					{#each ['avatar', 'banner'] as bt}
+						{#if item.repo.profile[bt]}
+							<tr>
+								<th class="text-right capitalize">{bt}</th>
+								<td>
+									<div class="flex">
+										<a href={blobUrl(item.did, item.repo.profile[bt].ref.$link)}>
+											<Image
+												src={blobUrl(item.did, item.repo.profile[bt].ref.$link) +
+													'?format=webp&width=320'}
+												divClass="w-40 {bt === 'banner' ? 'h-20' : 'h-40'}"
+												imgClass="object-contain"
+												on:load={() => loadBlobInfo(bt)}
+											/>
+										</a>
+										<BlobInfo data={blobInfo[bt]} />
+									</div>
+								</td>
+							</tr>
+						{/if}
+					{/each}
 				</tbody>
 			</table>
 		</div>