frontend/src/lib/planner/RecipePicker.svelte

@@ -8,24 +8,25 @@
 
 	interface Suggestion {
 		recipe: Recipe;
-		simulatedScore: number;
+		scoreDelta: number;
+		hasConflict: boolean;
 	}
 
 	let {
 		planId,
 		date,
 		dateLabel,
-		currentVarietyScore = 0,
 		suggestions = [],
 		allRecipes = [],
+		isLoading = false,
 		onpick
 	}: {
 		planId: string;
 		date: string;
 		dateLabel: string;
-		currentVarietyScore?: number;
 		suggestions: Suggestion[];
 		allRecipes: Recipe[];
+		isLoading?: boolean;
 		onpick: (recipeId: string, recipeName: string) => void;
 	} = $props();
 
@@ -71,7 +72,27 @@
 	</div>
 
 	<!-- Empfohlen section -->
-	{#if suggestions.length > 0}
+	{#if isLoading}
+		<div data-testid="suggestions-loading">
+			{#each [1, 2, 3] as i (i)}
+				<div
+					style="padding: 7px 12px; border-bottom: 1px solid var(--color-subtle); display: flex; align-items: center; gap: 8px;"
+				>
+					<div style="flex: 1; min-width: 0;">
+						<div
+							style="height: 12px; width: 60%; border-radius: 3px; background: var(--color-subtle); animation: pulse 1.5s ease-in-out infinite;"
+						></div>
+						<div
+							style="height: 9px; width: 35%; border-radius: 3px; background: var(--color-subtle); margin-top: 4px; animation: pulse 1.5s ease-in-out infinite;"
+						></div>
+					</div>
+					<div
+						style="height: 26px; width: 56px; border-radius: var(--radius-md); background: var(--color-subtle); animation: pulse 1.5s ease-in-out infinite;"
+					></div>
+				</div>
+			{/each}
+		</div>
+	{:else if suggestions.length > 0}
 		<div
 			style="font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); padding: 5px 12px 3px; background: var(--color-subtle);"
 		>
@@ -79,7 +100,6 @@
 		</div>
 
 		{#each suggestions as suggestion (suggestion.recipe.id)}
-			{@const delta = suggestion.simulatedScore - currentVarietyScore}
 			{@const meta = recipeMetadata(suggestion.recipe)}
 			<div
 				style="padding: 7px 12px; border-bottom: 1px solid var(--color-subtle); display: flex; align-items: center; gap: 8px;"
@@ -95,13 +115,13 @@
 							{meta}
 						</p>
 					{/if}
-					{#if delta > 0}
+					{#if !suggestion.hasConflict}
 						<span
 							data-testid="badge-{suggestion.recipe.id}"
 							data-type="good"
 							style="display: inline-block; margin-top: 3px; font-size: 8px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--green-tint); color: var(--green-dark);"
 						>
-							↑ +{delta.toFixed(0)} Punkte
+							↑ +{suggestion.scoreDelta.toFixed(0)} Punkte
 						</span>
 					{:else}
 						<span

frontend/src/lib/planner/RecipePicker.test.ts

@@ -4,8 +4,8 @@ import userEvent from '@testing-library/user-event';
 import RecipePicker from './RecipePicker.svelte';
 
 const suggestions = [
-	{ recipe: { id: 's1', name: 'Lachsfilet', effort: 'easy', cookTimeMin: 25 }, simulatedScore: 9.5 },
-	{ recipe: { id: 's2', name: 'Hähnchen-Curry', effort: 'easy', cookTimeMin: 35 }, simulatedScore: 6.0 }
+	{ recipe: { id: 's1', name: 'Lachsfilet', effort: 'easy', cookTimeMin: 25 }, scoreDelta: 1.5, hasConflict: false },
+	{ recipe: { id: 's2', name: 'Hähnchen-Curry', effort: 'easy', cookTimeMin: 35 }, scoreDelta: -1.5, hasConflict: true }
 ];
 
 const allRecipes = [
@@ -18,7 +18,6 @@ const baseProps = {
 	planId: 'plan-1',
 	date: '2026-04-05',
 	dateLabel: 'Samstag, 5. April',
-	currentVarietyScore: 7.5,
 	suggestions,
 	allRecipes,
 	onpick: vi.fn()
@@ -41,16 +40,16 @@ describe('RecipePicker', () => {
 		expect(screen.getByText('Hähnchen-Curry')).toBeTruthy();
 	});
 
-	it('shows green badge for suggestions with positive delta', () => {
+	it('shows green badge when hasConflict is false', () => {
 		render(RecipePicker, { props: baseProps });
-		// Lachsfilet: simulatedScore 9.5 - currentVarietyScore 7.5 = +2 → green badge
+		// Lachsfilet: hasConflict = false → green badge
 		const badge = screen.getByTestId('badge-s1');
 		expect(badge.getAttribute('data-type')).toBe('good');
 	});
 
-	it('shows yellow badge for suggestions with zero or negative delta', () => {
+	it('shows yellow badge when hasConflict is true', () => {
 		render(RecipePicker, { props: baseProps });
-		// Hähnchen-Curry: 6.0 - 7.5 = -1.5 → yellow badge
+		// Hähnchen-Curry: hasConflict = true → yellow badge
 		const badge = screen.getByTestId('badge-s2');
 		expect(badge.getAttribute('data-type')).toBe('warning');
 	});
@@ -98,4 +97,16 @@ describe('RecipePicker', () => {
 		await userEvent.type(input, 'xyznotfound');
 		expect(screen.getByText(/Keine Treffer/i)).toBeTruthy();
 	});
+
+	it('shows loading skeleton instead of Empfohlen section when isLoading is true', () => {
+		render(RecipePicker, { props: { ...baseProps, isLoading: true } });
+		expect(screen.getByTestId('suggestions-loading')).toBeTruthy();
+		expect(screen.queryByText(/Empfohlen/i)).toBeNull();
+	});
+
+	it('hides loading skeleton when isLoading is false and suggestions are present', () => {
+		render(RecipePicker, { props: { ...baseProps, isLoading: false } });
+		expect(screen.queryByTestId('suggestions-loading')).toBeNull();
+		expect(screen.getByText(/Empfohlen/i)).toBeTruthy();
+	});
 });