perf(desktop): keep the shell mounted under settings, cheaper mounts

products/desktop/packages/ui/src/features/browser-tabs/BrowserTabStrip.tsx

@@ -51,7 +51,7 @@ import {
   useRouter,
   useRouterState,
 } from "@tanstack/react-router";
-import { useCallback, useEffect, useMemo } from "react";
+import { memo, useCallback, useEffect, useMemo } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { shouldHandleBrowserTabSwitch } from "./browserTabShortcuts";
 import {
@@ -126,7 +126,7 @@ type TabRef = {
   appView: string | null;
 };
 
-export function BrowserTabStrip() {
+function BrowserTabStripImpl() {
   const spacesLayout = useChannelsLayout();
   const snapshot = useTabsSnapshot();
   const navigate = useNavigate();
@@ -944,3 +944,6 @@ export function BrowserTabStrip() {
     />
   );
 }
+
+// The root layout re-renders on every navigation; this keeps that from cascading here.
+export const BrowserTabStrip = memo(BrowserTabStripImpl);

products/desktop/packages/ui/src/features/canvas/components/ChannelItemRow.tsx

@@ -44,6 +44,7 @@ import { SidebarItem } from "@posthog/ui/features/sidebar/components/SidebarItem
 import { writeTaskDragData } from "@posthog/ui/features/sidebar/taskDrag";
 import { SESSION_ROW_ATTRIBUTE } from "@posthog/ui/features/sidebar/useMarqueeSelection";
 import { HandoffTaskDialog } from "@posthog/ui/features/task-detail/components/HandoffTaskDialog";
+import { useMountedOnceOpened } from "@posthog/ui/hooks/useMountedOnceOpened";
 import {
   type DragEvent,
   type ReactNode,
@@ -296,6 +297,7 @@ export function ChannelItemRow({
   const subtitle = useChannelItemMetadata(item);
   const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
   const [handoffOpen, setHandoffOpen] = useState(false);
+  const handoffMounted = useMountedOnceOpened(handoffOpen);
   const currentUser = useCurrentUser();
   const canHandoff =
     item.kind === "task" &&
@@ -454,7 +456,7 @@ export function ChannelItemRow({
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-      {canHandoff && item.task ? (
+      {canHandoff && item.task && handoffMounted ? (
         <HandoffTaskDialog
           task={item.task}
           open={handoffOpen}

products/desktop/packages/ui/src/features/canvas/components/ChannelSidebar.tsx

@@ -332,7 +332,14 @@ function listStateOf({
  */
 export function ChannelSidebar({ channelId }: { channelId: string }) {
   const navigate = useNavigate();
-  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  // Only paths inside this space matter here. Collapsing the rest to "" keeps
+  // every row still while the user is elsewhere (settings, another space).
+  const pathname = useRouterState({
+    select: (s) =>
+      s.location.pathname.startsWith(`/spaces/${channelId}`)
+        ? s.location.pathname
+        : "",
+  });
   const loopsEnabled = useFeatureFlag(LOOPS_FLAG);
 
   const { items, actions, me, isLoading, channelMissing } =

products/desktop/packages/ui/src/features/canvas/components/ChannelsList.test.tsx

@@ -145,7 +145,11 @@ vi.mock("@posthog/ui/features/canvas/components/RenameChannelModal", () => ({
 }));
 vi.mock("@tanstack/react-router", () => ({
   useNavigate: () => mocks.navigate,
-  useRouterState: () => "/spaces",
+  useRouterState: ({
+    select,
+  }: {
+    select: (s: { location: { pathname: string } }) => unknown;
+  }) => select({ location: { pathname: "/spaces" } }),
 }));
 
 import {

products/desktop/packages/ui/src/features/canvas/components/ChannelsList.tsx

@@ -110,6 +110,7 @@ import {
 } from "@posthog/ui/features/sidebar/components/items/taskStatusVocabulary";
 import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
 import { HandoffTaskDialog } from "@posthog/ui/features/task-detail/components/HandoffTaskDialog";
+import { useMountedOnceOpened } from "@posthog/ui/hooks/useMountedOnceOpened";
 import {
   OverflowTickerText,
   useOverflowTickerReveal,
@@ -436,12 +437,13 @@ const SpaceTaskRow = memo(function SpaceTaskRow({
   spaceId: string;
   asOption: boolean;
 }) {
-  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  const isActive = useRouterState({
+    select: (s) => s.location.pathname.endsWith(`/tasks/${item.id}`),
+  });
   const openTask = useOpenSpaceTask();
   // No PR lookup here: that is a host round trip per row, and the tree can show
   // a dozen spaces' worth of rows at once.
   const status = useChannelTaskStatus(item, { withPrStatus: false });
-  const isActive = pathname.endsWith(`/tasks/${item.id}`);
   const actions = useSpaceTaskActionsContext();
   // A boolean rather than the value itself, so a keypress re-renders only the
   // two rows whose answer changed.
@@ -450,6 +452,8 @@ const SpaceTaskRow = memo(function SpaceTaskRow({
   );
 
   const [handoffOpen, setHandoffOpen] = useState(false);
+
+  const handoffMounted = useMountedOnceOpened(handoffOpen);
   // Only the owner may hand a task off; the API 404s it for anyone else.
   const currentUser = useCurrentUser();
   const canHandoff =
@@ -529,7 +533,7 @@ const SpaceTaskRow = memo(function SpaceTaskRow({
         >
           {row}
         </ChannelItemHoverCard>
-        {canHandoff && item.task ? (
+        {canHandoff && item.task && handoffMounted ? (
           <HandoffTaskDialog
             task={item.task}
             open={handoffOpen}
@@ -711,7 +715,9 @@ function useChannelActions(channel: Channel): {
   // the action is destructive and irreversible.
   const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
   const navigate = useNavigate();
-  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  const insideChannel = useRouterState({
+    select: (s) => s.location.pathname.startsWith(`/spaces/${channel.id}`),
+  });
   const { deleteChannel, isDeleting } = useChannelMutations();
   const { isStarred, toggleStar } = useChannelStarToggle(channel);
 
@@ -751,7 +757,7 @@ function useChannelActions(channel: Channel): {
         success: true,
       });
       // If we're inside the channel being deleted, fall back to the index.
-      if (pathname.startsWith(`/spaces/${channel.id}`)) {
+      if (insideChannel) {
         void navigate({ to: "/spaces" });
       }
       return true;
@@ -948,11 +954,14 @@ const ChannelSection = memo(
   }) {
     const spacesLayout = useChannelsLayout();
     const noun = spacesLayout ? "space" : "channel";
-    const pathname = useRouterState({ select: (s) => s.location.pathname });
-    const openChannel = useOpenChannel();
     const base = `/spaces/${channel.id}`;
     // Highlight the row whenever any of the channel's routes is open.
-    const isActive = pathname === base || pathname.startsWith(`${base}/`);
+    const isActive = useRouterState({
+      select: (s) =>
+        s.location.pathname === base ||
+        s.location.pathname.startsWith(`${base}/`),
+    });
+    const openChannel = useOpenChannel();
     // Lifted so the hover button group stays visible while the menu is open.
     const [menuOpen, setMenuOpen] = useState(false);
     const { reveal, hoverProps, focusProps } = useOverflowTickerReveal();
@@ -973,6 +982,7 @@ const ChannelSection = memo(
       confirmDelete,
       isDeleting,
     } = useChannelActions(channel);
+    const renameMounted = useMountedOnceOpened(renameOpen);
 
     const newTask = () => {
       track(ANALYTICS_EVENTS.CHANNEL_ACTION, {
@@ -1174,11 +1184,13 @@ const ChannelSection = memo(
             </ButtonGroup>
           </div>
           {/* One modal for both the dropdown and context-menu "Rename" actions. */}
-          <RenameChannelModal
-            channel={channel}
-            open={renameOpen}
-            onOpenChange={setRenameOpen}
-          />
+          {renameMounted && (
+            <RenameChannelModal
+              channel={channel}
+              open={renameOpen}
+              onOpenChange={setRenameOpen}
+            />
+          )}
           {/* Destructive confirm for "Delete channel" — spells out what's removed. */}
           <ConfirmDialog
             open={confirmDeleteOpen}
@@ -1349,7 +1361,6 @@ const PersonalChannelRow = memo(function PersonalChannelRow({
   onToggleExpanded?: (spaceId: string) => void;
 }) {
   const spacesLayout = useChannelsLayout();
-  const pathname = useRouterState({ select: (s) => s.location.pathname });
   const { channels } = useChannels();
   const { ensureChannelId, openPersonalChannel } = useOpenPersonalChannel();
 
@@ -1358,10 +1369,12 @@ const PersonalChannelRow = memo(function PersonalChannelRow({
   const isUnread = useIsChannelUnread()(meChannel?.id);
   const unreadSessions = useUnreadSessionCount()(meChannel?.id);
   const blockedSessions = useBlockedSessionCount()(meChannel?.id);
-  const isActive =
-    !!meChannel &&
-    (pathname === `/spaces/${meChannel.id}` ||
-      pathname.startsWith(`/spaces/${meChannel.id}/`));
+  const isActive = useRouterState({
+    select: (s) =>
+      !!meChannel &&
+      (s.location.pathname === `/spaces/${meChannel.id}` ||
+        s.location.pathname.startsWith(`/spaces/${meChannel.id}/`)),
+  });
 
   const newTask = () => {
     const channelId = ensureChannelId();

products/desktop/packages/ui/src/features/canvas/components/ChannelsSidebar.test.tsx

@@ -85,18 +85,28 @@ vi.mock("@posthog/ui/features/workspace/useWorkspace", () => ({
   useWorkspaces: () => ({ data: {}, isFetched: true }),
 }));
 vi.mock("@tanstack/react-router", () => ({
-  useParams: () => ({ channelId: mocks.routeChannelId }),
+  useParams: ({
+    select,
+  }: {
+    select?: (params: { channelId: string | undefined }) => unknown;
+  } = {}) => {
+    const params = { channelId: mocks.routeChannelId };
+    return select ? select(params) : params;
+  },
   useRouterState: ({
     select,
   }: {
     select: (s: {
       matches: { fullPath: string }[];
-      location: { state: { tabId?: string } };
+      location: { pathname: string; state: { tabId?: string } };
     }) => unknown;
   }) =>
     select({
       matches: [{ fullPath: mocks.fullPath }],
-      location: { state: { tabId: mocks.historyTabId } },
+      location: {
+        pathname: mocks.fullPath,
+        state: { tabId: mocks.historyTabId },
+      },
     }),
 }));
 

products/desktop/packages/ui/src/features/canvas/components/ChannelsSidebar.tsx

@@ -51,7 +51,7 @@ import { useSidebarEdgeHoverPeek } from "@posthog/ui/primitives/hooks/useSidebar
 import { ResizableSidebar } from "@posthog/ui/primitives/ResizableSidebar";
 import { navigateToArchived } from "@posthog/ui/router/navigationBridge";
 import { useParams } from "@tanstack/react-router";
-import { useDeferredValue, useEffect, useRef } from "react";
+import { memo, useDeferredValue, useEffect, useRef } from "react";
 
 /**
  * The sidebar slider: the channel list and the channel you're in, laid out side
@@ -132,7 +132,7 @@ function ChannelPanes({
     </div>
   );
 }
-export function ChannelsSidebar() {
+function ChannelsSidebarImpl() {
   const width = useChannelsSidebarStore((state) => state.width);
   const setWidth = useChannelsSidebarStore((state) => state.setWidth);
   const isResizing = useChannelsSidebarStore((state) => state.isResizing);
@@ -204,7 +204,10 @@ export function ChannelsSidebar() {
   // slide to there's only the list.
   const { pane: railPane, showsActivityDetail } = useRailSurface();
   const selectedActivityId = useActivitySelection()?.id;
-  const { feedId } = useParams({ strict: false });
+  const feedId = useParams({
+    strict: false,
+    select: (params) => params.feedId,
+  });
   const pane = useChannelPaneStore((s) => s.pane);
   const { isPending: pendingTabSwitch, viewState: pendingTabViewState } =
     usePendingTabViewState();
@@ -315,3 +318,6 @@ export function ChannelsSidebar() {
     </ResizableSidebar>
   );
 }
+
+// The root layout re-renders on every navigation; this keeps that from cascading here.
+export const ChannelsSidebar = memo(ChannelsSidebarImpl);

products/desktop/packages/ui/src/features/canvas/components/NavRail.tsx

@@ -42,6 +42,7 @@ import { useCommandMenuStore } from "@posthog/ui/shell/commandMenuStore";
 import {
   type ComponentPropsWithRef,
   type MouseEventHandler,
+  memo,
   type ReactElement,
   type ReactNode,
   useState,
@@ -178,7 +179,7 @@ function ActivityNavItem({
  * The app's leftmost column. Sits outside the resizable sidebar, so collapsing
  * that sidebar leaves the destinations reachable.
  */
-export function NavRail() {
+function NavRailImpl() {
   const homeEnabled = useFeatureFlag(DESKTOP_HOME_FLAG);
   const loopsEnabled = useFeatureFlag(LOOPS_FLAG);
   const contextEnabled = useContextLayerFlag();
@@ -322,3 +323,6 @@ export function NavRail() {
     </TooltipProvider>
   );
 }
+
+// The root layout re-renders on every navigation; this keeps that from cascading here.
+export const NavRail = memo(NavRailImpl);

products/desktop/packages/ui/src/features/canvas/components/ShellLayout.tsx

@@ -347,7 +347,10 @@ function CanvasBreadcrumb({
 
 export function ShellLayout() {
   const spacesLayout = useChannelsLayout();
-  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  const pathname = useRouterState({
+    select: (s) =>
+      s.location.pathname.startsWith("/spaces/") ? s.location.pathname : "",
+  });
   const selectedCanvasId = useSelectedCanvasId();
   const params = useParams({ strict: false });
 

products/desktop/packages/ui/src/features/navigation/components/RightPanel.tsx

@@ -218,7 +218,7 @@ function useDrawnSide(
 }
 
 /** Every side belongs to a session, so nothing below this runs elsewhere. */
-export function RightPanel() {
+function RightPanelImpl() {
   const { taskId } = useActiveSession();
   // Keyed by session: carrying per-session state across a navigation draws the
   // previous session's panel over the new one for a frame.
@@ -319,3 +319,6 @@ function SessionRightPanel({ taskId }: { taskId: string }) {
     </>
   );
 }
+
+// The root layout re-renders on every navigation; this keeps that from cascading here.
+export const RightPanel = memo(RightPanelImpl);

products/desktop/packages/ui/src/features/panels/components/TabbedPanel.tsx

@@ -180,33 +180,38 @@ export const TabbedPanel: React.FC<TabbedPanelProps> = ({
   );
 
   useEffect(() => {
-    if (!scrollContainerRef.current || !content.activeTabId) return;
+    // Measured after paint: reading rects inside the commit forced a layout
+    // of the freshly mounted tab.
+    const frame = requestAnimationFrame(() => {
+      if (!scrollContainerRef.current || !content.activeTabId) return;
 
-    const activeTabIndex = content.tabs.findIndex(
-      (tab) => tab.id === content.activeTabId,
-    );
-    if (activeTabIndex === -1) return;
+      const activeTabIndex = content.tabs.findIndex(
+        (tab) => tab.id === content.activeTabId,
+      );
+      if (activeTabIndex === -1) return;
 
-    const container = scrollContainerRef.current;
-    const tabElement = container.children[activeTabIndex] as HTMLElement;
-    if (!tabElement) return;
+      const container = scrollContainerRef.current;
+      const tabElement = container.children[activeTabIndex] as HTMLElement;
+      if (!tabElement) return;
 
-    const containerRect = container.getBoundingClientRect();
-    const tabRect = tabElement.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const tabRect = tabElement.getBoundingClientRect();
 
-    if (tabRect.right > containerRect.right - 64) {
-      tabElement.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "end",
-      });
-    } else if (tabRect.left < containerRect.left) {
-      tabElement.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "start",
-      });
-    }
+      if (tabRect.right > containerRect.right - 64) {
+        tabElement.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "end",
+        });
+      } else if (tabRect.left < containerRect.left) {
+        tabElement.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "start",
+        });
+      }
+    });
+    return () => cancelAnimationFrame(frame);
   }, [content.activeTabId, content.tabs]);
 
   return (