fix: only animate login background on initial page load

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,
+		showAlternativeSignInMethodButton = false
-		animate = 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',

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
+<SignInWrapper showAlternativeSignInMethodButton={$userStore == null}>
-	animate={!$appConfigStore.disableAnimations}
-	showAlternativeSignInMethodButton={$userStore == null}
->
 	<div class="flex justify-center">
 		{#if deviceInfo?.client}
 			<ClientProviderImages client={deviceInfo.client} {success} error={!!errorMessage} />

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>

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" />

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>

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} />

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>