🐛 fix(nutriphi-web): fix i18n hydration error

- Don't call $t() before i18n is loaded
- Use loading spinner instead of translated text during load
- Conditionally render title in svelte:head

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/nutriphi/apps/web/src/routes/+layout.svelte

@@ -3,22 +3,33 @@
 	import '$lib/i18n';
 	import { isLoading as i18nLoading, _ as t } from 'svelte-i18n';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import { onMount } from 'svelte';
 
 	let { children } = $props();
 
-	// Initialize auth on mount
-	$effect(() => {
-		authStore.initialize();
+	let loading = $state(true);
+	let appReady = $derived(!loading && !$i18nLoading);
+
+	onMount(() => {
+		authStore.initialize().then(() => {
+			loading = false;
+		});
 	});
 </script>
 
 <svelte:head>
-	<title>{$t('app.name')} - {$t('app.tagline')}</title>
+	{#if appReady}
+		<title>{$t('app.name')} - {$t('app.tagline')}</title>
+	{:else}
+		<title>NutriPhi</title>
+	{/if}
 </svelte:head>
 
-{#if $i18nLoading}
-	<div class="flex min-h-screen items-center justify-center">
-		<p>{$t('app.loading')}</p>
+{#if !appReady}
+	<div class="flex min-h-screen items-center justify-center bg-background">
+		<div
+			class="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"
+		></div>
 	</div>
 {:else}
 	{@render children()}