From 0dc950c824ae2b5f43238208f4b631bffaa46736 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Tue, 13 Jan 2026 15:12:12 +0100
Subject: [PATCH] fix: prevent infinite effect loop in recipe translation
 workflow

Convert recipe data functions to $derived reactive variables to prevent
infinite $effect loops. Previously, calling functions inline in component
props created new objects on every reactive check, causing the
TranslationApproval component's syncBaseRecipeReferences $effect to run
continuously, resulting in the translation workflow hanging.
---
 .../[recipeLang=recipeLang]/add/+page.svelte  | 36 +++++++++----------
 .../edit/[name]/+page.svelte                  | 10 +++---
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/routes/[recipeLang=recipeLang]/add/+page.svelte b/src/routes/[recipeLang=recipeLang]/add/+page.svelte
index cff8591..d809050 100644
--- a/src/routes/[recipeLang=recipeLang]/add/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/add/+page.svelte
@@ -85,24 +85,22 @@
 		return season;
 	}
 
-	// Prepare German recipe data
-	function getGermanRecipeData() {
-		return {
-			...card_data,
-			...add_info,
-			images: uploaded_image_filename ? [{ mediapath: uploaded_image_filename, alt: "", caption: "" }] : [],
-			season: season_local,
-			short_name: short_name.trim(),
-			portions: portions_local,
-			datecreated: new Date(),
-			datemodified: new Date(),
-			instructions,
-			ingredients,
-			preamble,
-			addendum,
-			isBaseRecipe,
-		};
-	}
+	// Prepare German recipe data - use $derived to prevent infinite effect loops
+	let germanRecipeData = $derived({
+		...card_data,
+		...add_info,
+		images: uploaded_image_filename ? [{ mediapath: uploaded_image_filename, alt: "", caption: "" }] : [],
+		season: season_local,
+		short_name: short_name.trim(),
+		portions: portions_local,
+		datecreated: new Date(),
+		datemodified: new Date(),
+		instructions,
+		ingredients,
+		preamble,
+		addendum,
+		isBaseRecipe,
+	});
 
 	// Show translation workflow before submission
 	function prepareSubmit() {
@@ -385,7 +383,7 @@ button.action_button {
 {#if showTranslationWorkflow}
 	<div id="translation-section">
 		<TranslationApproval
-			germanData={getGermanRecipeData()}
+			germanData={germanRecipeData}
 			onapproved={handleTranslationApproved}
 			onskipped={handleTranslationSkipped}
 			oncancelled={handleTranslationCancelled}
diff --git a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
index 2a3375e..7beaa15 100644
--- a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
@@ -103,8 +103,8 @@
 		return season;
 	}
 
-	// Get current German recipe data
-	function getCurrentRecipeData() {
+	// Get current German recipe data - use $derived to prevent infinite effect loops
+	let currentRecipeData = $derived.by(() => {
 		// Ensure we always have a valid images array with at least one item
 		let recipeImages;
 		if (uploaded_image_filename) {
@@ -142,11 +142,11 @@
 			note,
 			isBaseRecipe,
 		};
-	}
+	});
 
 	// Detect which fields have changed from the original
 	function detectChangedFields(): string[] {
-		const current = getCurrentRecipeData();
+		const current = currentRecipeData;
 		const changed: string[] = [];
 
 		const fieldsToCheck = [
@@ -486,7 +486,7 @@
 {#if showTranslationWorkflow}
 	<div id="translation-section">
 		<TranslationApproval
-			germanData={getCurrentRecipeData()}
+			germanData={currentRecipeData}
 			englishData={translationData}
 			changedFields={changedFields}
 			isEditMode={true}