From 22e2b63d2ebd30411bb9b92710952c0b1cd90ff8 Mon Sep 17 00:00:00 2001
From: ashzak <ashzak@gmail.com>
Date: Thu, 11 Jun 2026 07:39:15 -0500
Subject: [PATCH] fix(studio): prevent UI freeze when switching tabs from heavy
 pages (#5978)

* fix(studio): prevent UI freeze when switching tabs from heavy pages

Change AnimatePresence mode from "wait" to "popLayout" to fix issue
where switching tabs from Export (or other heavy pages) would cause
the URL to update but the UI to freeze.

With mode="wait", the exit animation must complete before the new
component mounts. If the exiting page has expensive computations,
this blocks the UI. mode="popLayout" allows the new route to mount
immediately while the old one animates out.

Fixes #5850

* fix: add relative positioning for popLayout mode

AnimatePresence mode='popLayout' applies position: absolute to the
exiting element, so the parent container needs position: relative
to prevent layout jumps during transitions.

---------

Co-authored-by: Lee Jackson <130007945+Imagineer99@users.noreply.github.com>
---
 studio/frontend/src/app/routes/__root.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/studio/frontend/src/app/routes/__root.tsx b/studio/frontend/src/app/routes/__root.tsx
index c8e47902b9..c05b0e6451 100644
--- a/studio/frontend/src/app/routes/__root.tsx
+++ b/studio/frontend/src/app/routes/__root.tsx
@@ -140,9 +140,14 @@ function RootLayout() {
           <SidebarInset className={isChatRoute ? "overflow-hidden" : "overflow-y-auto"}>
             <Navbar />
             <div
-              className={`flex min-h-0 min-w-0 flex-1 basis-0 flex-col ${isChatRoute ? "overflow-hidden" : "overflow-visible"} ${isChatRoute ? "" : "pt-14 md:pt-0"}`}
+              className={`relative flex min-h-0 min-w-0 flex-1 basis-0 flex-col ${isChatRoute ? "overflow-hidden" : "overflow-visible"} ${isChatRoute ? "" : "pt-14 md:pt-0"}`}
             >
-              <AnimatePresence initial={false} mode="wait">
+              {/* Use mode="popLayout" instead of "wait" to prevent UI freezes when
+                  switching from heavy pages (like Export with many checkpoints).
+                  "popLayout" allows the new route to mount immediately while the
+                  old one animates out, avoiding blocking on expensive exit renders.
+                  See issue #5850. */}
+              <AnimatePresence initial={false} mode="popLayout">
                 <motion.div
                   key={pathname}
                   initial={{ opacity: 0 }}