From 1cbf04abe4c3083e62aaeb50002e530b1bd4f57b Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 13 Oct 2026 00:38:58 +0200
Subject: [PATCH] web: free lightbox images on close, defer offscreen cards

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/repo/Readme.svelte         |  2 +-
 web/src/lib/components/repo/StarredBy.svelte      |  2 +-
 .../repo/pulls/PullReviewComment.svelte           |  4 +++-
 .../lib/components/timeline/TimelineCard.svelte   |  2 +-
 web/src/lib/components/ui/Lightbox.svelte         |  4 +++-
 web/src/lib/lightbox.svelte.ts                    |  8 +++++++-
 web/src/routes/+layout.svelte                     | 15 +++++++++------
 web/src/theme.css                                 |  5 +++++
 8 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/web/src/lib/components/repo/Readme.svelte b/web/src/lib/components/repo/Readme.svelte
index 9087d6d15..d68e12bfe 100644
--- a/web/src/lib/components/repo/Readme.svelte
+++ b/web/src/lib/components/repo/Readme.svelte
@@ -11,7 +11,7 @@
 	let { filename, contents, html = null }: Props = $props();
 </script>
 
-<Card padding="none" class="mt-md w-full overflow-hidden">
+<Card padding="none" class="mt-md w-full overflow-hidden defer-render-256">
 	<div class="border-b border-border-default px-md py-xs">
 		<span class="flex items-center gap-xs">
 			<FileText class="size-3.5 text-foreground-subtle" aria-hidden="true" />
diff --git a/web/src/lib/components/repo/StarredBy.svelte b/web/src/lib/components/repo/StarredBy.svelte
index 028888aeb..db94d09b6 100644
--- a/web/src/lib/components/repo/StarredBy.svelte
+++ b/web/src/lib/components/repo/StarredBy.svelte
@@ -11,6 +11,6 @@
 	let { did, handle, createdAt }: Props = $props();
 </script>
 
-<Card border padding="small">
+<Card border padding="small" class="defer-render-20">
 	<StarredByContent {did} {handle} {createdAt} />
 </Card>
diff --git a/web/src/lib/components/repo/pulls/PullReviewComment.svelte b/web/src/lib/components/repo/pulls/PullReviewComment.svelte
index 4ff884a34..e5cee5f8b 100644
--- a/web/src/lib/components/repo/pulls/PullReviewComment.svelte
+++ b/web/src/lib/components/repo/pulls/PullReviewComment.svelte
@@ -47,7 +47,9 @@
 </script>
 
 <div
-	class="flex flex-col gap-xs p-xs {active ? 'text-foreground-default' : 'text-foreground-muted'}"
+	class="flex flex-col gap-xs p-xs defer-render-28 {active
+		? 'text-foreground-default'
+		: 'text-foreground-muted'}"
 >
 	<header class="flex h-8 items-center justify-between">
 		<!-- User pins its own `text-foreground-default`, so the dimmed state has to say so -->
diff --git a/web/src/lib/components/timeline/TimelineCard.svelte b/web/src/lib/components/timeline/TimelineCard.svelte
index 3a69f189b..3b368226b 100644
--- a/web/src/lib/components/timeline/TimelineCard.svelte
+++ b/web/src/lib/components/timeline/TimelineCard.svelte
@@ -12,7 +12,7 @@
 	}: { header: Snippet; children: Snippet; footer?: Snippet; padded?: boolean } = $props();
 </script>
 
-<LayerCard>
+<LayerCard class="defer-render-40">
 	<LayerCardSecondary class="flex-wrap gap-1.25 px-[calc(var(--spacing-sm)+1px)]">
 		{@render header()}
 	</LayerCardSecondary>
diff --git a/web/src/lib/components/ui/Lightbox.svelte b/web/src/lib/components/ui/Lightbox.svelte
index e136574ef..faecbb9ae 100644
--- a/web/src/lib/components/ui/Lightbox.svelte
+++ b/web/src/lib/components/ui/Lightbox.svelte
@@ -43,9 +43,10 @@
 		index?: number;
 		maxScale?: number;
 		onClose: () => void;
+		onExited?: () => void;
 	}
 
-	let { open, images, index = $bindable(0), maxScale = 4, onClose }: Props = $props();
+	let { open, images, index = $bindable(0), maxScale = 4, onClose, onExited }: Props = $props();
 
 	const TOGGLE = 2.5;
 	const KEY_ZOOM = 1.6;
@@ -383,6 +384,7 @@
 			panel?.close();
 			staged = false;
 			closing = false;
+			onExited?.();
 		};
 
 		if (reduced()) {
diff --git a/web/src/lib/lightbox.svelte.ts b/web/src/lib/lightbox.svelte.ts
index a8cf1ca10..6c56b37eb 100644
--- a/web/src/lib/lightbox.svelte.ts
+++ b/web/src/lib/lightbox.svelte.ts
@@ -8,7 +8,7 @@ export interface LightboxImage {
 }
 
 class LightboxState {
-	images = $state<LightboxImage[]>([]);
+	images = $state.raw<LightboxImage[]>([]);
 	index = $state(0);
 	open = $state(false);
 
@@ -25,6 +25,12 @@ class LightboxState {
 		this.open = false;
 	}
 
+	clear(): void {
+		if (this.open) return;
+		this.images = [];
+		this.index = 0;
+	}
+
 	step(delta: number): void {
 		const count = this.images.length;
 		if (count < 2) return;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 3edef6ba0..148d1785a 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -134,9 +134,12 @@
 	</div>
 {/if}
 
-<Lightbox
-	open={lightbox.open}
-	images={lightbox.images}
-	bind:index={lightbox.index}
-	onClose={() => lightbox.close()}
-/>
+{#if lightbox.images.length > 0}
+	<Lightbox
+		open={lightbox.open}
+		images={lightbox.images}
+		bind:index={lightbox.index}
+		onClose={() => lightbox.close()}
+		onExited={() => lightbox.clear()}
+	/>
+{/if}
diff --git a/web/src/theme.css b/web/src/theme.css
index 8c8044174..7e3ace2a9 100644
--- a/web/src/theme.css
+++ b/web/src/theme.css
@@ -466,6 +466,11 @@
 	}
 }
 
+@utility defer-render-* {
+	content-visibility: auto;
+	contain-intrinsic-height: auto --spacing(--value(number));
+}
+
 @utility hit-area {
 	position: relative;
 
-- 
2.54.0