From e6912ce58e65dd223ab80eece6fd0975a1dd304e Mon Sep 17 00:00:00 2001 From: deepshekhardas Date: Fri, 19 Jun 2026 10:55:59 +0530 Subject: [PATCH] fix(webapp): animated resizable panel pattern for route components Squashed rebase of pr-3319-fix onto official/main. Co-authored-by: James Ritchie --- .changeset/animated-resizable-panel.md | 8 ++++++++ .../webapp/app/components/primitives/Resizable.tsx | 14 +++++--------- .../route.tsx | 2 +- 3 files changed, 14 insertions(+), 10 deletions(-) create mode 100644 .changeset/animated-resizable-panel.md diff --git a/.changeset/animated-resizable-panel.md b/.changeset/animated-resizable-panel.md new file mode 100644 index 00000000000..718a5b81742 --- /dev/null +++ b/.changeset/animated-resizable-panel.md @@ -0,0 +1,8 @@ +--- +"@trigger.dev/core": patch +"@trigger.dev/sdk": patch +--- + +Feat(webapp): animated resizable panel + +Adds animated open/close transitions to Resizable panels using react-window-splitter built-in animation hooks. Includes new exports: RESIZABLE_PANEL_ANIMATION, collapsibleHandleClassName(), and useFrozenValue(). Converts inspector/detail side panels from conditionally-mounted to always-mounted collapsible panels across multiple routes (batches, runs, schedules, deployments, logs, waitpoints, bulk-actions). diff --git a/apps/webapp/app/components/primitives/Resizable.tsx b/apps/webapp/app/components/primitives/Resizable.tsx index b2964c8e958..2efaae4258e 100644 --- a/apps/webapp/app/components/primitives/Resizable.tsx +++ b/apps/webapp/app/components/primitives/Resizable.tsx @@ -1,7 +1,7 @@ "use client"; import React, { useRef } from "react"; -import { PanelGroup, Panel, PanelResizer } from "@window-splitter/react"; +import { PanelGroup, Panel, PanelResizer } from "react-window-splitter"; import { cn } from "~/utils/cn"; const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps) => ( @@ -69,14 +69,10 @@ const ResizableHandle = ({ ); -// react-window-splitter drives the collapse animation through @react-spring/rafz, -// which has timing/interaction issues with Firefox that produce visual glitches -// (alternating frames, panels stuck at min, panelHasSpace invariant violations). -// Disable the animation on Firefox; it works correctly in Chromium and Safari. -const RESIZABLE_PANEL_ANIMATION = - typeof navigator !== "undefined" && /firefox/i.test(navigator.userAgent) - ? undefined - : ({ easing: "ease-in-out", duration: 300 } as const); +const RESIZABLE_PANEL_ANIMATION = { + easing: "ease-in-out" as const, + duration: 200, +}; const COLLAPSIBLE_HANDLE_CLASSNAME = "transition-opacity duration-200"; diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx index c913623ebab..e080305ec0a 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx @@ -413,7 +413,7 @@ function LogsList({ const frozenLogId = useFrozenValue(selectedLogId); const frozenLog = useFrozenValue(selectedLog); const displayLogId = selectedLogId ?? frozenLogId; - const displayLog = selectedLog ?? frozenLog ?? undefined; + const displayLog = selectedLog ?? frozenLog; const updateUrlWithLog = useCallback((logId: string | undefined) => { const url = new URL(window.location.href);