From b356cef766697c621157235ae1d2743f3fe6720d Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Fri, 24 Oct 2025 10:39:52 +0200
Subject: [PATCH] fix: only animate login background on initial page load

---
 frontend/src/lib/components/login-wrapper.svelte   | 14 ++++++++++----
 frontend/src/routes/device/+page.svelte            |  6 +-----
 frontend/src/routes/login/+page.svelte             |  2 +-
 frontend/src/routes/logout/+page.svelte            |  2 +-
 frontend/src/routes/signup/+page.svelte            |  2 +-
 .../src/routes/signup/add-passkey/+page.svelte     |  3 +--
 frontend/src/routes/signup/setup/+page.svelte      |  2 +-
 7 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/login-wrapper.svelte b/frontend/src/lib/components/login-wrapper.svelte
index 315180cf..4d5de56b 100644
--- a/frontend/src/lib/components/login-wrapper.svelte
+++ b/frontend/src/lib/components/login-wrapper.svelte
@@ -1,23 +1,29 @@
 <script lang="ts">
+	import { afterNavigate } from '$app/navigation';
 	import { page } from '$app/state';
 	import { m } from '$lib/paraglide/messages';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import { cachedBackgroundImage } from '$lib/utils/cached-image-util';
 	import { cn } from '$lib/utils/style';
-	import type { Snippet } from 'svelte';
+	import { type Snippet } from 'svelte';
 	import { MediaQuery } from 'svelte/reactivity';
 	import * as Card from './ui/card';
 
 	let {
 		children,
-		showAlternativeSignInMethodButton = false,
-		animate = false
+		showAlternativeSignInMethodButton = false
 	}: {
 		children: Snippet;
 		showAlternativeSignInMethodButton?: boolean;
-		animate?: boolean;
 	} = $props();
 
+	let isInitialLoad = $state(false);
+	let animate = $derived(isInitialLoad && !$appConfigStore.disableAnimations);
+
+	afterNavigate((e) => {
+		isInitialLoad = !e?.from?.url;
+	});
+
 	const isDesktop = new MediaQuery('min-width: 1024px');
 	let alternativeSignInButton = $state({
 		href: '/login/alternative',
diff --git a/frontend/src/routes/device/+page.svelte b/frontend/src/routes/device/+page.svelte
index 999bed61..72b955de 100644
--- a/frontend/src/routes/device/+page.svelte
+++ b/frontend/src/routes/device/+page.svelte
@@ -8,7 +8,6 @@
 	import { m } from '$lib/paraglide/messages';
 	import OIDCService from '$lib/services/oidc-service';
 	import WebAuthnService from '$lib/services/webauthn-service';
-	import appConfigStore from '$lib/stores/application-configuration-store';
 	import userStore from '$lib/stores/user-store';
 	import type { OidcDeviceCodeInfo } from '$lib/types/oidc.type';
 	import { getAxiosErrorMessage } from '$lib/utils/error-util';
@@ -72,10 +71,7 @@
 	<title>{m.authorize_device()}</title>
 </svelte:head>
 
-<SignInWrapper
-	animate={!$appConfigStore.disableAnimations}
-	showAlternativeSignInMethodButton={$userStore == null}
->
+<SignInWrapper showAlternativeSignInMethodButton={$userStore == null}>
 	<div class="flex justify-center">
 		{#if deviceInfo?.client}
 			<ClientProviderImages client={deviceInfo.client} {success} error={!!errorMessage} />
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index f920286f..24baaee3 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -39,7 +39,7 @@
 	<title>{m.sign_in()}</title>
 </svelte:head>
 
-<SignInWrapper animate={!$appConfigStore.disableAnimations} showAlternativeSignInMethodButton>
+<SignInWrapper showAlternativeSignInMethodButton>
 	<div class="flex justify-center">
 		<LoginLogoErrorSuccessIndicator error={!!error} />
 	</div>
diff --git a/frontend/src/routes/logout/+page.svelte b/frontend/src/routes/logout/+page.svelte
index 9800e5d0..d8792831 100644
--- a/frontend/src/routes/logout/+page.svelte
+++ b/frontend/src/routes/logout/+page.svelte
@@ -28,7 +28,7 @@
 	<title>{m.logout()}</title>
 </svelte:head>
 
-<SignInWrapper animate={!$appConfigStore.disableAnimations}>
+<SignInWrapper>
 	<div class="flex justify-center">
 		<div class="bg-muted rounded-2xl p-3">
 			<Logo class="size-10" />
diff --git a/frontend/src/routes/signup/+page.svelte b/frontend/src/routes/signup/+page.svelte
index b5444747..41747516 100644
--- a/frontend/src/routes/signup/+page.svelte
+++ b/frontend/src/routes/signup/+page.svelte
@@ -56,7 +56,7 @@
 	<title>{m.signup()}</title>
 </svelte:head>
 
-<SignInWrapper animate={!$appConfigStore.disableAnimations}>
+<SignInWrapper>
 	<div class="flex justify-center">
 		<LoginLogoErrorSuccessIndicator error={!!error} />
 	</div>
diff --git a/frontend/src/routes/signup/add-passkey/+page.svelte b/frontend/src/routes/signup/add-passkey/+page.svelte
index f66b96f7..d30f7d43 100644
--- a/frontend/src/routes/signup/add-passkey/+page.svelte
+++ b/frontend/src/routes/signup/add-passkey/+page.svelte
@@ -5,7 +5,6 @@
 	import { Button } from '$lib/components/ui/button';
 	import { m } from '$lib/paraglide/messages';
 	import WebAuthnService from '$lib/services/webauthn-service';
-	import appConfigStore from '$lib/stores/application-configuration-store';
 	import { getWebauthnErrorMessage } from '$lib/utils/error-util';
 	import { tryCatch } from '$lib/utils/try-catch-util';
 	import { startRegistration } from '@simplewebauthn/browser';
@@ -65,7 +64,7 @@
 	<title>{m.add_passkey()}</title>
 </svelte:head>
 
-<SignInWrapper animate={!$appConfigStore.disableAnimations}>
+<SignInWrapper>
 	<div class="w-full text-center">
 		<div class="flex justify-center">
 			<LoginLogoErrorSuccessIndicator error={!!error} />
diff --git a/frontend/src/routes/signup/setup/+page.svelte b/frontend/src/routes/signup/setup/+page.svelte
index 0cce247f..78c16739 100644
--- a/frontend/src/routes/signup/setup/+page.svelte
+++ b/frontend/src/routes/signup/setup/+page.svelte
@@ -42,7 +42,7 @@
 	<title>{m.signup()}</title>
 </svelte:head>
 
-<SignInWrapper animate={!$appConfigStore.disableAnimations}>
+<SignInWrapper>
 	<div class="flex justify-center">
 		<LoginLogoErrorSuccessIndicator error={!!error} />
 	</div>