From ebb75594a23303381a8afedaf0ca9e45f65af794 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Wed, 10 Dec 2025 19:11:14 +0100
Subject: [PATCH] fix(calendar): ensure i18n locale is loaded before rendering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wait for svelte-i18n locale to be fully loaded before rendering
child components to prevent "Cannot format a message without first
setting the initial locale" error.

Changes:
- Explicitly set locale on browser init in i18n/index.ts
- Wait for locale in root +layout.svelte before rendering children

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/calendar/apps/web/src/lib/i18n/index.ts     | 8 +++++++-
 apps/calendar/apps/web/src/routes/+layout.svelte | 5 +++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/calendar/apps/web/src/lib/i18n/index.ts b/apps/calendar/apps/web/src/lib/i18n/index.ts
index 00626549b..4928d3441 100644
--- a/apps/calendar/apps/web/src/lib/i18n/index.ts
+++ b/apps/calendar/apps/web/src/lib/i18n/index.ts
@@ -35,11 +35,17 @@ function getInitialLocale(): SupportedLocale {
 }
 
 // Initialize i18n at module scope (required for SSR)
+// Always set initialLocale to ensure it's never undefined
 init({
 	fallbackLocale: defaultLocale,
-	initialLocale: getInitialLocale(),
+	initialLocale: browser ? getInitialLocale() : defaultLocale,
 });
 
+// On browser, also explicitly set locale to ensure it's loaded
+if (browser) {
+	locale.set(getInitialLocale());
+}
+
 // Set locale and persist to localStorage
 export function setLocale(newLocale: SupportedLocale) {
 	locale.set(newLocale);
diff --git a/apps/calendar/apps/web/src/routes/+layout.svelte b/apps/calendar/apps/web/src/routes/+layout.svelte
index bf247f9cb..e0ed75e76 100644
--- a/apps/calendar/apps/web/src/routes/+layout.svelte
+++ b/apps/calendar/apps/web/src/routes/+layout.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import '../app.css';
+	// Initialize i18n early - must be imported before any component that uses $_
+	import { waitLocale } from '$lib/i18n';
 	import { onMount } from 'svelte';
 	import { theme } from '$lib/stores/theme';
 	import { authStore } from '$lib/stores/auth.svelte';
@@ -11,6 +13,9 @@
 	let loading = $state(true);
 
 	onMount(async () => {
+		// Wait for i18n locale to be loaded
+		await waitLocale();
+
 		// Initialize theme
 		theme.initialize();