feat: disable animations setting toggle (#442)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/lib/components/fade-wrapper.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { Snippet } from 'svelte';
 
 	let {
@@ -12,7 +13,7 @@
 		children: Snippet;
 	} = $props();
 
-	let containerNode: HTMLElement;
+	let containerNode: HTMLElement | null = $state(null);
 
 	$effect(() => {
 		page.route;
@@ -53,6 +54,10 @@
 	</style>
 </svelte:head>
 
-<div class="fade-wrapper" bind:this={containerNode}>
+{#if $appConfigStore.disableAnimations}
 	{@render children()}
-</div>
+{:else}
+	<div class="fade-wrapper" bind:this={containerNode}>
+		{@render children()}
+	</div>
+{/if}

frontend/src/lib/types/application-configuration.ts

@@ -3,6 +3,7 @@ export type AppConfig = {
 	allowOwnAccountEdit: boolean;
 	emailOneTimeAccessEnabled: boolean;
 	ldapEnabled: boolean;
+	disableAnimations: boolean;
 };
 
 export type AllAppConfig = AppConfig & {

frontend/src/routes/login/+page.svelte

@@ -36,7 +36,7 @@
 	<title>{m.sign_in()}</title>
 </svelte:head>
 
-<SignInWrapper animate showAlternativeSignInMethodButton>
+<SignInWrapper animate={!$appConfigStore.disableAnimations} showAlternativeSignInMethodButton>
 	<div class="flex justify-center">
 		<LoginLogoErrorSuccessIndicator error={!!error} />
 	</div>

frontend/src/routes/login/alternative/+page.svelte

@@ -31,7 +31,7 @@
 	<title>{m.sign_in()}</title>
 </svelte:head>
 
-<SignInWrapper>
+<SignInWrapper animate={!$appConfigStore.disableAnimations}>
 	<div class="flex h-full flex-col justify-center">
 		<div class="bg-muted mx-auto rounded-2xl p-3">
 			<Logo class="h-10 w-10" />

frontend/src/routes/login/setup/+page.svelte

@@ -29,7 +29,7 @@
 	}
 </script>
 
-<SignInWrapper>
+<SignInWrapper animate={!$appConfigStore.disableAnimations}>
 	<div class="flex justify-center">
 		<LoginLogoErrorSuccessIndicator error={!!error} />
 	</div>

frontend/src/routes/settings/+layout.svelte

@@ -2,7 +2,9 @@
 	import { page } from '$app/state';
 	import FadeWrapper from '$lib/components/fade-wrapper.svelte';
 	import { m } from '$lib/paraglide/messages';
+	import appConfigStore from '$lib/stores/application-configuration-store';
 	import userStore from '$lib/stores/user-store';
+	import { cn } from '$lib/utils/style';
 	import { LucideExternalLink, LucideSettings } from 'lucide-svelte';
 	import type { Snippet } from 'svelte';
 	import { fade, fly } from 'svelte/transition';
@@ -20,7 +22,7 @@
 
 	const links = [
 		{ href: '/settings/account', label: m.my_account() },
-		{ href: '/settings/audit-log', label: m.audit_log() },		
+		{ href: '/settings/audit-log', label: m.audit_log() }
 	];
 
 	const adminLinks = [
@@ -54,11 +56,12 @@
 						{#each links as { href, label }, i}
 							<a
 								{href}
-								class={`animate-fade-in ${
+								class={cn(
+									!$appConfigStore.disableAnimations && 'animate-fade-in',
 									page.url.pathname.startsWith(href)
 										? 'text-primary bg-card rounded-md px-3 py-1.5 font-medium shadow-sm transition-all'
 										: 'hover:text-foreground hover:bg-muted/70 rounded-md px-3 py-1.5 transition-all hover:-translate-y-[2px] hover:shadow-sm'
-								}`}
+								)}
 								style={`animation-delay: ${150 + i * 75}ms;`}
 							>
 								{label}

frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte

@@ -24,14 +24,16 @@
 		appName: appConfig.appName,
 		sessionDuration: appConfig.sessionDuration,
 		emailsVerified: appConfig.emailsVerified,
-		allowOwnAccountEdit: appConfig.allowOwnAccountEdit
+		allowOwnAccountEdit: appConfig.allowOwnAccountEdit,
+		disableAnimations: appConfig.disableAnimations
 	};
 
 	const formSchema = z.object({
 		appName: z.string().min(2).max(30),
 		sessionDuration: z.number().min(1).max(43200),
 		emailsVerified: z.boolean(),
-		allowOwnAccountEdit: z.boolean()
+		allowOwnAccountEdit: z.boolean(),
+		disableAnimations: z.boolean()
 	});
 
 	const { inputs, ...form } = createForm<typeof formSchema>(formSchema, updatedAppConfig);
@@ -66,6 +68,12 @@
 				description={m.whether_the_users_email_should_be_marked_as_verified_for_the_oidc_clients()}
 				bind:checked={$inputs.emailsVerified.value}
 			/>
+			<CheckboxWithLabel
+				id="disable-animations"
+				label={m.disable_animations()}
+				description={m.turn_off_all_animations_throughout_the_admin_ui()}
+				bind:checked={$inputs.disableAnimations.value}
+			/>
 		</div>
 		<div class="mt-5 flex justify-end">
 			<Button {isLoading} type="submit">{m.save()}</Button>