fix(app): suppress review sidebar hydration motion

Author: jayair

packages/app/e2e/regression/review-tab-switch.spec.ts

@@ -41,6 +41,18 @@ test("keeps the v2 review pane mounted when switching session tabs in a workspac
   expect(await readProbe(page)).toBe(PROBE)
 })
 
+test("enables review sidebar transitions after persisted state is ready", async ({ page }) => {
+  await setup(page)
+
+  await page.goto(sessionHref(sessionA))
+  await expectSessionTitle(page, titleA)
+  await page.getByRole("button", { name: "Toggle review" }).click()
+
+  const sidebar = page.locator('[data-slot="session-review-v2-sidebar"]')
+  await expectAppVisible(sidebar)
+  await expect(sidebar).toHaveAttribute("data-transition", "")
+})
+
 type Probed = HTMLElement & { __e2eProbe?: string }
 
 async function switchTab(page: Page, title: string) {

packages/app/src/pages/session/v2/review-panel-v2-state.ts

@@ -9,7 +9,7 @@ import { createStore } from "solid-js/store"
 import { Persist, persisted } from "@/utils/persist"
 
 export function createReviewPanelV2State() {
-  const [store, setStore] = persisted(
+  const [store, setStore, , ready] = persisted(
     Persist.global("review-panel-v2"),
     createStore({
       sidebarOpened: true,
@@ -24,6 +24,7 @@ export function createReviewPanelV2State() {
   return {
     sidebarOpened: () => store.sidebarOpened,
     sidebarWidth: () => store.sidebarWidth,
+    sidebarTransition: ready,
     filter,
     setFilter,
     expandMode: () => store.expandMode,

packages/app/src/pages/session/v2/review-panel-v2.tsx

@@ -180,6 +180,7 @@ function ReviewPanelV2Sidebar(props: {
   return (
     <SessionReviewV2Sidebar
       open={props.state.sidebarOpened()}
+      transition={props.state.sidebarTransition()}
       title={props.title}
       stats={<DiffChanges changes={props.diffs()} />}
       filter={props.state.filter()}

packages/session-ui/src/v2/components/session-review-v2.css

@@ -38,7 +38,8 @@
   border-right-width: 0;
 }
 
-[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar"]:not([data-resizing]) {
+[data-component="session-review-v2-sidebar-root"]
+  [data-slot="session-review-v2-sidebar"][data-transition]:not([data-resizing]) {
   transition:
     width 200ms cubic-bezier(0.22, 1, 0.36, 1),
     border-right-width 200ms cubic-bezier(0.22, 1, 0.36, 1);

packages/session-ui/src/v2/components/session-review-v2.tsx

@@ -39,6 +39,7 @@ export type SessionReviewV2Props = {
 
 export type SessionReviewV2SidebarProps = {
   open: boolean
+  transition: boolean
   title?: JSX.Element
   stats?: JSX.Element
   filter: string
@@ -69,6 +70,7 @@ export function SessionReviewV2Sidebar(props: SessionReviewV2SidebarProps) {
     <div data-component="session-review-v2-sidebar-root">
       <aside
         data-slot="session-review-v2-sidebar"
+        data-transition={props.transition ? "" : undefined}
         data-resizing={resizing() ? "" : undefined}
         aria-hidden={!props.open}
         inert={!props.open}