From 11ca6935a6765e37f620ce87c129bfe339cce1d1 Mon Sep 17 00:00:00 2001 From: pptx704 Date: Sat, 11 Apr 2026 06:48:50 +0600 Subject: [PATCH] Skip row fly-transitions on template filter change to prevent visual flicker After initial page load animations complete, subsequent filter switches render instantly (duration: 0) instead of replaying staggered fly-in/out transitions that caused all rows to flash before filtering took effect. --- frontend/src/routes/dashboard/snapshots/+page.svelte | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/src/routes/dashboard/snapshots/+page.svelte b/frontend/src/routes/dashboard/snapshots/+page.svelte index 26250e1..2fe2b37 100644 --- a/frontend/src/routes/dashboard/snapshots/+page.svelte +++ b/frontend/src/routes/dashboard/snapshots/+page.svelte @@ -53,6 +53,9 @@ return snapshots.filter((s) => s.type === typeFilter); }); + // Suppress row fly-transitions after initial load so filter switches are instant. + let initialLoadDone = $state(false); + async function fetchSnapshots() { loading = true; error = null; @@ -63,6 +66,9 @@ error = result.error; } loading = false; + // Allow entrance animations to play on initial load, then suppress + // them on subsequent filter changes to avoid visual flicker. + setTimeout(() => { initialLoadDone = true; }, 400); } async function handleDelete() { @@ -343,8 +349,8 @@ class="snapshot-row row-item relative grid items-center overflow-hidden border-b border-[var(--color-border)] transition-colors duration-150 last:border-b-0 {isSnapshot ? 'type-snapshot' : 'type-image'}" style="grid-template-columns: 2fr 1fr 0.7fr 0.9fr 0.8fr 1.3fr 140px" - in:fly={{ y: 6, duration: 350, delay: i * 40, easing: cubicOut }} - out:fly={{ x: -12, duration: 180, easing: cubicIn }} + in:fly={initialLoadDone ? { duration: 0 } : { y: 6, duration: 350, delay: i * 40, easing: cubicOut }} + out:fly={initialLoadDone ? { duration: 0 } : { x: -12, duration: 180, easing: cubicIn }} >