From 3b092bcd460a3a69d8763b8b2a9b687271e1dfa3 Mon Sep 17 00:00:00 2001
From: AdamPlatin123 <154926636+AdamPlatin123@users.noreply.github.com>
Date: Mon, 13 Apr 2026 16:38:00 +0800
Subject: [PATCH] fix(studio): prevent route transition DOM duplication via
 AnimatePresence (#4987)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add mode="wait" and exit={{ opacity: 0 }} to the root AnimatePresence
wrapper so outgoing routes fully unmount before incoming routes render.
Without this, rapid navigation between Studio/Export/Recipes/Chat caused
pages to stack (2x–3x duplication).

Co-authored-by: AdamPlatin123 <AdamPlatin123@users.noreply.github.com>
Co-authored-by: Wasim Yousef Said <wasimysdev@gmail.com>
---
 studio/frontend/src/app/routes/__root.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/studio/frontend/src/app/routes/__root.tsx b/studio/frontend/src/app/routes/__root.tsx
index d7780c6743..bac9205303 100644
--- a/studio/frontend/src/app/routes/__root.tsx
+++ b/studio/frontend/src/app/routes/__root.tsx
@@ -40,11 +40,12 @@ function RootLayout() {
   return (
     <AppProvider>
       {!hideNavbar && <Navbar />}
-      <AnimatePresence initial={false}>
+      <AnimatePresence initial={false} mode="wait">
         <motion.div
           key={pathname}
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
           transition={{ duration: 0.15 }}
           className="flex-1"
         >