tksadik92/wrenn-releases
1
0
Fork 0
forked from wrenn/wrenn
Code Pull Requests Activity

Skip row fly-transitions on template filter change to prevent visual flicker

Browse Source 
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.
This commit is contained in:
Rafeed M. Bhuiyan
2026-04-11 06:48:50 +06:00
parent e2f869bfc2
commit 11ca6935a6
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/routes/dashboard/snapshots/+page.svelte
View File

@ -53,6 +53,9 @@
return snapshots.filter((s) => s.type === typeFilter); 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() { async function fetchSnapshots() {
loading = true; loading = true;
error = null; error = null;
@ -63,6 +66,9 @@
error = result.error; error = result.error;
} }
loading = false; 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() { 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 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'}" {isSnapshot ? 'type-snapshot' : 'type-image'}"
style="grid-template-columns: 2fr 1fr 0.7fr 0.9fr 0.8fr 1.3fr 140px" 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 }} in:fly={initialLoadDone ? { duration: 0 } : { y: 6, duration: 350, delay: i * 40, easing: cubicOut }}
out:fly={{ x: -12, duration: 180, easing: cubicIn }} out:fly={initialLoadDone ? { duration: 0 } : { x: -12, duration: 180, easing: cubicIn }}
> >
<!-- Left accent stripe --> <!-- Left accent stripe -->
<div class="row-stripe pointer-events-none absolute left-0 top-0 h-full w-[3px]" style="background: {typeColor}"></div> <div class="row-stripe pointer-events-none absolute left-0 top-0 h-full w-[3px]" style="background: {typeColor}"></div>