preview: keep metadata sidebar mounted across photo changes

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>
This commit is contained in:
2026-05-20 10:28:12 +02:00
parent 64c0da794d
commit e1707c314d

View File

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