From 7922563c4d6fadc0222bfce7b677efd4fd874538 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Mon, 16 Feb 2026 14:43:15 +0100
Subject: [PATCH] fix: prevent hero image flash by aligning server/client
 random seed

Generate heroIndex on the server and pass it to the client so SSR and
hydration pick the same hero recipe, eliminating the image swap on
first interaction.
---
 src/routes/[recipeLang=recipeLang]/+page.server.ts | 3 ++-
 src/routes/[recipeLang=recipeLang]/+page.svelte    | 4 ++--
 src/routes/[recipeLang=recipeLang]/+page.ts        | 1 +
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/routes/[recipeLang=recipeLang]/+page.server.ts b/src/routes/[recipeLang=recipeLang]/+page.server.ts
index c8a406b..b235c45 100644
--- a/src/routes/[recipeLang=recipeLang]/+page.server.ts
+++ b/src/routes/[recipeLang=recipeLang]/+page.server.ts
@@ -19,6 +19,7 @@ export const load: PageServerLoad = async ({ fetch, locals, params }) => {
     return {
         season: addFavoriteStatusToRecipes(item_season, userFavorites),
         all_brief: addFavoriteStatusToRecipes(item_all_brief, userFavorites),
-        session
+        session,
+        heroIndex: Math.random()
     };
 };
diff --git a/src/routes/[recipeLang=recipeLang]/+page.svelte b/src/routes/[recipeLang=recipeLang]/+page.svelte
index 84126d1..2e04077 100644
--- a/src/routes/[recipeLang=recipeLang]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+page.svelte
@@ -26,8 +26,8 @@
 	// Only recipes with hashed images (e.g. myrecipe.a1b2c3d4.webp)
 	const hasHashedImage = (r) => r.images?.length > 0 && /\.\w+\.\w+$/.test(r.images[0].mediapath);
 
-	// Pick once on mount — not reactive, so image and link always match
-	const heroIndex = Math.random();
+	// Server-generated random index ensures SSR and client pick the same hero
+	const heroIndex = data.heroIndex;
 	const heroRecipe = $derived.by(() => {
 		const seasonPool = data.season.filter(hasHashedImage);
 		const pool = seasonPool.length > 0 ? seasonPool : data.all_brief.filter(hasHashedImage);
diff --git a/src/routes/[recipeLang=recipeLang]/+page.ts b/src/routes/[recipeLang=recipeLang]/+page.ts
index 956df2b..31c1dee 100644
--- a/src/routes/[recipeLang=recipeLang]/+page.ts
+++ b/src/routes/[recipeLang=recipeLang]/+page.ts
@@ -34,6 +34,7 @@ export async function load({ data }) {
 					...data,
 					all_brief: rand_array(allBrief),
 					season: rand_array(seasonRecipes),
+					heroIndex: Math.random(),
 					isOffline: true
 				};
 			}