feat: lazy loading for evidences preview with caching (faster)

frontend/src/lib/components/ModelTable/EvidenceFilePreview.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { run } from 'svelte/legacy';
 
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { m } from '$paraglide/messages';
+	import { attachmentCache, generateAttachmentCacheKey } from '$lib/stores/attachmentCache';
 
 	interface Props {
 		cell: any;
@@ -18,30 +19,109 @@
 	}
 
 	let attachment: Attachment | undefined = $state();
+	let containerElement: HTMLElement | undefined = $state();
+	let isVisible = $state(false);
+	let observer: IntersectionObserver | undefined;
+	let cacheKey = $state('');
 
 	const fetchAttachment = async () => {
-		const res = await fetch(
-			`/${meta.evidence ? 'evidence-revisions' : 'evidences'}/${meta.id}/attachment`
-		);
-		const blob = await res.blob();
-		return {
-			type: blob.type,
-			url: URL.createObjectURL(blob),
-			fileExists: res.ok
-		};
+		// Generate cache key
+		cacheKey = generateAttachmentCacheKey(meta.id, meta.attachment);
+
+		// Check cache first
+		if (attachmentCache.has(cacheKey)) {
+			const cached = attachmentCache.get(cacheKey);
+			if (cached) {
+				return cached;
+			}
+		}
+
+		// Fetch from server if not in cache
+		try {
+			const res = await fetch(
+				`/${meta.evidence ? 'evidence-revisions' : 'evidences'}/${meta.id}/attachment`
+			);
+			if (!res.ok) {
+				const miss = { type: '', url: '', fileExists: false } satisfies Attachment;
+				attachmentCache.set(cacheKey, miss);
+				return miss;
+			}
+			const blob = await res.blob();
+			const result = {
+				type: blob.type,
+				url: URL.createObjectURL(blob),
+				fileExists: true
+			} satisfies Attachment;
+			attachmentCache.set(cacheKey, result);
+			return result;
+		} catch (err) {
+			if ((err as any)?.name === 'AbortError') {
+				const miss = { type: '', url: '', fileExists: false } satisfies Attachment;
+				return miss;
+			}
+			const miss = { type: '', url: '', fileExists: false } satisfies Attachment;
+			attachmentCache.set(cacheKey, miss);
+			return miss;
+		}
 	};
 
 	let mounted = $state(false);
-	onMount(async () => {
-		attachment = meta.attachment ? await fetchAttachment() : undefined;
+	onMount(() => {
 		mounted = true;
+
+		// Set up Intersection Observer for lazy loading
+		if (containerElement && meta.attachment) {
+			observer = new IntersectionObserver(
+				(entries) => {
+					entries.forEach((entry) => {
+						if (entry.isIntersecting && !isVisible) {
+							isVisible = true;
+							// Fetch attachment when element becomes visible
+							fetchAttachment().then((_attachment) => {
+								attachment = _attachment;
+							});
+							// Disconnect after first load
+							observer?.disconnect();
+						}
+					});
+				},
+				{
+					rootMargin: '50px' // Start loading slightly before element is visible
+				}
+			);
+			observer.observe(containerElement);
+		}
+	});
+
+	onDestroy(() => {
+		// Clean up observer
+		if (observer) {
+			observer.disconnect();
+		}
+		// Note: We do NOT revoke blob URLs here because the attachmentCache
+		// is shared across multiple components. The cache itself handles
+		// URL revocation when URLs are replaced or when cache.clear() is called.
+		// Revoking URLs here would break other components using the same attachment.
 	});
 
 	run(() => {
 		if (mounted && meta.attachment) {
-			fetchAttachment().then((_attachment) => {
-				attachment = _attachment;
-			});
+			// Check cache first when meta changes
+			const key = generateAttachmentCacheKey(meta.id, meta.attachment);
+			if (attachmentCache.has(key)) {
+				const cached = attachmentCache.get(key);
+				if (cached) {
+					attachment = cached;
+					return;
+				}
+			}
+
+			// If visible, fetch immediately
+			if (isVisible) {
+				fetchAttachment().then((_attachment) => {
+					attachment = _attachment;
+				});
+			}
 		} else {
 			attachment = undefined;
 		}
@@ -54,7 +134,7 @@
 	const embedElementClasses = 'w-[50%] h-[90%]';
 </script>
 
-{#snippet displayPreview()}
+{#snippet displayPreview(att: Attachment)}
 	<div
 		role="button"
 		tabindex="0"
@@ -69,38 +149,40 @@
 			}
 		}}
 	>
-		{#if attachment.type.startsWith('image')}
+		{#if att.type.startsWith('image')}
 			<img
-				src={attachment.url}
+				src={att.url}
 				alt="attachment"
 				class="h-24 object-contain {display ? imageElementClasses : ''}"
 			/>
-		{:else if attachment.type === 'application/pdf'}
+		{:else if att.type === 'application/pdf'}
 			{#if !display}
 				<!-- This div prevents the <embed> element from stopping the click event propagation. -->
 				<div class="absolute w-full h-full top-0 left-0"></div>
 			{/if}
 			<embed
-				src={attachment.url}
+				src={att.url}
 				type="application/pdf"
 				class="h-24 object-contain {display ? embedElementClasses : ''}"
 			/>
 		{/if}
 	</div>
 {/snippet}
 
-{#if cell}
-	{#if attachment}
-		{#if attachment.type.startsWith('image') || attachment.type === 'application/pdf'}
-			{@render displayPreview(attachment)}
-		{:else if !attachment.fileExists}
-			<p class="text-error-500 font-bold">{m.couldNotFindAttachmentMessage()}</p>
+<div bind:this={containerElement}>
+	{#if cell}
+		{#if attachment}
+			{#if attachment.type.startsWith('image') || attachment.type === 'application/pdf'}
+				{@render displayPreview(attachment)}
+			{:else if !attachment.fileExists}
+				<p class="text-error-500 font-bold">{m.couldNotFindAttachmentMessage()}</p>
+			{:else}
+				<p>{m.NoPreviewMessage()}</p>
+			{/if}
 		{:else}
-			<p>{m.NoPreviewMessage()}</p>
+			<span data-testid="loading-field">
+				{m.loading()}...
+			</span>
 		{/if}
-	{:else}
-		<span data-testid="loading-field">
-			{m.loading()}...
-		</span>
 	{/if}
-{/if}
+</div>

frontend/src/lib/stores/attachmentCache.ts

@@ -0,0 +1,82 @@
+import { writable, get } from 'svelte/store';
+
+/**
+ * Global cache for attachment blob URLs
+ * Prevents duplicate downloads of the same evidence attachment
+ */
+
+interface CachedAttachment {
+	type: string;
+	url: string;
+	fileExists: boolean;
+}
+
+interface AttachmentCache {
+	[key: string]: CachedAttachment;
+}
+
+function createAttachmentCache() {
+	const { subscribe, set, update } = writable<AttachmentCache>({});
+
+	return {
+		subscribe,
+		/**
+		 * Get a cached attachment by key
+		 */
+		get: (key: string): CachedAttachment | undefined => {
+			const cache = get({ subscribe });
+			return cache[key];
+		},
+		/**
+		 * Store an attachment in the cache
+		 */
+		set: (key: string, value: CachedAttachment) => {
+			update((cache) => {
+				const prev = cache[key];
+				if (prev?.url && prev.url !== value.url) {
+					URL.revokeObjectURL(prev.url);
+				}
+				return { ...cache, [key]: value };
+			});
+		},
+		/**
+		 * Remove an attachment from the cache and revoke its blob URL
+		 */
+		remove: (key: string) => {
+			update((cache) => {
+				if (cache[key]) {
+					URL.revokeObjectURL(cache[key].url);
+					delete cache[key];
+				}
+				return cache;
+			});
+		},
+		/**
+		 * Clear all cached attachments and revoke all blob URLs
+		 */
+		clear: () => {
+			update((cache) => {
+				Object.values(cache).forEach((attachment) => {
+					URL.revokeObjectURL(attachment.url);
+				});
+				return {};
+			});
+		},
+		/**
+		 * Check if an attachment is in the cache
+		 */
+		has: (key: string): boolean => {
+			const cache = get({ subscribe });
+			return key in cache;
+		}
+	};
+}
+
+export const attachmentCache = createAttachmentCache();
+
+/**
+ * Generate a cache key for an attachment
+ */
+export function generateAttachmentCacheKey(id: string, attachmentName: string): string {
+	return `${id}-${attachmentName}`;
+}