dtoro
0f4e2e0b8f
Preview pane paints instantly: a blurred copy of the same thumbnail the grid loaded (cache hit) rides beneath the sharp fit_1280, which now carries fetchpriority=high and decoding=async. A $effect prefetches fit_1280 for the ±2 neighbours so arrow-skim hits the HTTP cache. Carousel thumbs drop to fetchpriority=low so they yield to the main image. Skeleton grid gains an mt-2 to breathe against the toolbar. BulkActionBar moves inside the main column in both PreviewModal and the /tags drill-in so it no longer stretches under the right sidebar. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
32 lines
989 B
Svelte
32 lines
989 B
Svelte
<!--
|
|
Loading skeleton for photo grids. Renders a small fixed batch of
|
|
pulsing tiles in the same column track as the real grid so the layout
|
|
doesn't shift when data arrives. Used on initial load only — the
|
|
infinite-scroll "Loading more…" sentinel at the bottom of the timeline
|
|
is a different signal and stays as text.
|
|
-->
|
|
<script lang="ts">
|
|
import { view } from '$lib/stores/view.svelte';
|
|
|
|
interface Props {
|
|
/** Number of skeleton tiles. Default ~first-viewport-worth. */
|
|
count?: number;
|
|
/** Override the column template (matches the real grid's CSS). */
|
|
columns?: string;
|
|
}
|
|
let { count = 20, columns }: Props = $props();
|
|
const tracks = $derived(
|
|
columns ?? `repeat(auto-fill, minmax(${view.thumbnailSize}px, 1fr))`
|
|
);
|
|
</script>
|
|
|
|
<div
|
|
aria-hidden="true"
|
|
class="mt-2 grid gap-2"
|
|
style="grid-template-columns: {tracks};"
|
|
>
|
|
{#each Array.from({ length: count }) as _, i (i)}
|
|
<div class="aspect-square animate-pulse rounded-md bg-secondary"></div>
|
|
{/each}
|
|
</div>
|