From d05cc634594d762deb0492cbdb696f5d0b840a61 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 2 Jun 2026 16:44:35 -0400
Subject: [PATCH] fix(badges): remove transition from initial loader to fix
 double-DOM bounce
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/routes/events/[event_id]/(badges)/badges/+page.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/events/[event_id]/(badges)/badges/+page.svelte b/src/routes/events/[event_id]/(badges)/badges/+page.svelte
index e71d61d6..66f5943b 100644
--- a/src/routes/events/[event_id]/(badges)/badges/+page.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { untrack } from 'svelte';
-import { slide, fade } from 'svelte/transition';
+import { slide } from 'svelte/transition';
 interface Props {
     /** @type {import('./$types').PageData} */
     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}
     <div
-        transition:fade={{ duration: 200 }}
         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" />
         <p class="text-xl">Loading badges...</p>