From c8ab4bbcbeb67556e6396c0b0d02a58d45c6d528 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Sat, 14 Feb 2026 13:39:35 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(nutriphi-web):=20fix=20i18n?=
 =?UTF-8?q?=20hydration=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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/web/src/routes/+layout.svelte        | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/apps/nutriphi/apps/web/src/routes/+layout.svelte b/apps/nutriphi/apps/web/src/routes/+layout.svelte
index 9660c3bf1..3bcb1587f 100644
--- a/apps/nutriphi/apps/web/src/routes/+layout.svelte
+++ b/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()}