From e1707c314d5c0cd213fc802d827d65090514a519 Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Wed, 20 May 2026 10:28:12 +0200
Subject: [PATCH] preview: keep metadata sidebar mounted across photo changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously the modal's aside was gated on `focusedPhotoQuery.data`, so
each arrow-skim unmounted the sidebar until the next photo's metadata
arrived — which reflowed the preview pane sideways. Now the aside is
always mounted while the modal is open; its contents swap between the
metadata panel and a small InlineLoader the same way the timeline's
right-aside does.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/preview/PreviewModal.svelte    | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/preview/PreviewModal.svelte b/web/src/lib/components/preview/PreviewModal.svelte
index ca0ee52..8a19867 100644
--- a/web/src/lib/components/preview/PreviewModal.svelte
+++ b/web/src/lib/components/preview/PreviewModal.svelte
@@ -33,6 +33,7 @@
 	import PreviewCarousel from './PreviewCarousel.svelte';
 	import RightSidebar from '$lib/components/sidebar/RightSidebar.svelte';
 	import BulkActionBar from '$lib/components/timeline/BulkActionBar.svelte';
+	import { InlineLoader } from '$lib/components/feedback';
 
 	const focusedUid = $derived(selection.focused);
 
@@ -155,13 +156,19 @@
 					<!-- Action toolbar (acts on selection.ids; falls back to focused). -->
 					<BulkActionBar />
 				</div>
-				{#if focusedPhotoQuery.data}
-					<aside
-						class="w-[300px] shrink-0 overflow-y-auto border-l border-border bg-card"
-					>
+				<!-- Sidebar stays mounted across photo changes so the preview
+				     pane doesn't reflow on arrow-skim; contents swap between
+				     the metadata panel and a small loader the same way the
+				     timeline's right-aside does. -->
+				<aside
+					class="w-[300px] shrink-0 overflow-y-auto border-l border-border bg-card"
+				>
+					{#if focusedPhotoQuery.data}
 						<RightSidebar photo={focusedPhotoQuery.data} />
-					</aside>
-				{/if}
+					{:else if focusedPhotoQuery.isFetching}
+						<InlineLoader size="sm" label="Loading metadata…" />
+					{/if}
+				</aside>
 			</div>
 
 			<!-- Bottom filmstrip across selection.order. -->