fix: prevent infinite effect loop in recipe translation workflow
All checks were successful
CI / update (push) Successful in 1m14s

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.
This commit is contained in:
2026-01-13 15:12:12 +01:00
parent 0a49e20c02
commit 0dc950c824
2 changed files with 22 additions and 24 deletions

View File

@@ -85,9 +85,8 @@
return season;
}
// Prepare German recipe data
function getGermanRecipeData() {
return {
// 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: "" }] : [],
@@ -101,8 +100,7 @@
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}

View File

@@ -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}