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. -->