From c15eed665510a670d3c7c233475c7b6320c5f8db Mon Sep 17 00:00:00 2001
From: LyAhn <admin@jezz.wtf>
Date: Sat, 13 Jun 2026 21:48:41 +0100
Subject: [PATCH] fix(onboarding): no image flash when switching search demos

Switching search modes briefly showed the next demo's result images because
the results container stayed mounted and faded its opacity down from the
previous demo's visible state. Key it by demoIndex so it remounts fresh at
opacity-0 and only fades in once the new query finishes typing.
---
 src/components/onboarding/StepSearchDemo.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/onboarding/StepSearchDemo.tsx b/src/components/onboarding/StepSearchDemo.tsx
index 35dd510..be81f3e 100644
--- a/src/components/onboarding/StepSearchDemo.tsx
+++ b/src/components/onboarding/StepSearchDemo.tsx
@@ -84,10 +84,16 @@ export function StepSearchDemo() {
 
       {/* Results — hidden (not greyed) until the query finishes typing, so it
           doesn't look like the app is reading the user's mind. Space is held
-          by the invisible tiles so the layout doesn't jump when they appear. */}
-      <div className={`mt-3 flex flex-wrap justify-center gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-0"}`}>
+          by the invisible tiles so the layout doesn't jump when they appear.
+          Keyed by demoIndex so switching demos remounts the row fresh at
+          opacity-0 instead of fading the new images out from the previous
+          demo's visible state. */}
+      <div
+        key={demoIndex}
+        className={`mt-3 flex flex-wrap justify-center gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-0"}`}
+      >
         {demo.results.map((src, i) => (
-          <div key={`${demoIndex}-${i}`} className="aspect-square w-36 overflow-hidden rounded-xl bg-white/[0.04]">
+          <div key={i} className="aspect-square w-36 overflow-hidden rounded-xl bg-white/[0.04]">
             <img src={src} alt="" className="h-full w-full object-cover" />
           </div>
         ))}