Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(badges): remove transition from initial loader to fix double-DOM bounce

Browse Source 
transition:fade on the initial spinner caused Svelte to keep the outgoing
element in the DOM for the full 200ms outro while the incoming badge list
was already rendered — both were live simultaneously, colliding on height
and producing the visible bounce. Initial cold-start load doesn't need a
transition; instant swap is fine.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-06-02 16:44:35 -04:00
parent ac17417f3c
commit d05cc63459
1 changed files with 1 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/routes/events/[event_id]/(badges)/badges/+page.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { untrack } from 'svelte'; import { untrack } from 'svelte';
import { slide, fade } from 'svelte/transition'; import { slide } from 'svelte/transition';
interface Props { interface Props {
/** @type {import('./$types').PageData} */ /** @type {import('./$types').PageData} */
data: any; data: any;
@@ -594,7 +594,6 @@ async function handle_search_refresh(params: any) {
{#if $events_sess?.badges?.search_status === 'loading' && event_badge_id_li.length === 0} {#if $events_sess?.badges?.search_status === 'loading' && event_badge_id_li.length === 0}
<div <div
transition:fade={{ duration: 200 }}
class="flex w-full flex-col items-center justify-center p-16 text-center opacity-50"> class="flex w-full flex-col items-center justify-center p-16 text-center opacity-50">
<LoaderCircle size="3em" class="mx-auto mb-2 animate-spin" /> <LoaderCircle size="3em" class="mx-auto mb-2 animate-spin" />
<p class="text-xl">Loading badges...</p> <p class="text-xl">Loading badges...</p>