add memo for better perf, hide until open

Author: AlemTuzlak

packages/react-router-devtools/package.json

@@ -131,6 +131,7 @@
 		"@babel/traverse": "^7.28.5",
 		"@babel/types": "^7.28.5",
 		"@radix-ui/react-accordion": "^1.2.12",
+		"@tanstack/devtools-client": "^0.0.5",
 		"@tanstack/devtools-event-client": "^0.4.0",
 		"@tanstack/devtools-vite": "^0.4.1",
 		"@tanstack/react-devtools": "^0.9.1",

packages/react-router-devtools/src/client/components/Tag.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react"
+import { type ReactNode, memo } from "react"
 import { cx, useStyles } from "../styles/use-styles.js"
 
 export const TAG_COLORS = {
@@ -16,7 +16,7 @@ interface TagProps {
 	size?: "small" | "default"
 }
 
-const Tag = ({ color, children, className, size = "default" }: TagProps) => {
+const Tag = memo(({ color, children, className, size = "default" }: TagProps) => {
 	const { styles } = useStyles()
 	return (
 		<span
@@ -30,6 +30,6 @@ const Tag = ({ color, children, className, size = "default" }: TagProps) => {
 			{children}
 		</span>
 	)
-}
+})
 
 export { Tag }

packages/react-router-devtools/src/client/components/icon/Icon.tsx

@@ -1,4 +1,4 @@
-import type { SVGProps } from "react"
+import { type SVGProps, memo } from "react"
 import { cx } from "../../styles/use-styles.js"
 import { useStyles } from "../../styles/use-styles.js"
 import type { IconName } from "./icons/types.js"
@@ -30,7 +30,7 @@ const strokeIcon: Partial<IconName>[] = []
  * Icon component wrapper for SVG icons.
  * @returns SVG icon as a react component
  */
-export const Icon = ({ name, title, testId, className, size = "sm", ...props }: IconProps) => {
+export const Icon = memo(({ name, title, testId, className, size = "sm", ...props }: IconProps) => {
 	const { styles } = useStyles()
 	const iconSize = IconSize[size]
 	const isEmptyFill = emptyFill.includes(name)
@@ -316,4 +316,4 @@ export const Icon = ({ name, title, testId, className, size = "sm", ...props }:
 			<use href={`#${name}`} />
 		</svg>
 	)
-}
+})

packages/react-router-devtools/src/client/embedded-dev-tools.tsx

@@ -10,8 +10,8 @@ import { Tabs } from "./layout/Tabs.js"
 import type { ReactRouterDevtoolsProps } from "./react-router-dev-tools.js"
 // Import to ensure global reset styles are injected
 import "./styles/use-styles.js"
+import { devtoolsEventClient } from "@tanstack/devtools-client"
 import { REACT_ROUTER_DEV_TOOLS } from "./utils/storage.js"
-
 export interface EmbeddedDevToolsProps extends ReactRouterDevtoolsProps {
 	mainPanelClassName?: string
 	className?: string
@@ -21,6 +21,12 @@ const Embedded = ({ mainPanelClassName, className }: EmbeddedDevToolsProps) => {
 	useFindRouteOutlets()
 	useSetRouteBoundaries()
 
+	const [isOpen, setIsOpen] = useState(true)
+	useEffect(() => {
+		devtoolsEventClient.on("trigger-toggled", (e) => {
+			setIsOpen(e.payload.isOpen)
+		})
+	}, [])
 	return (
 		<div
 			id={REACT_ROUTER_DEV_TOOLS}
@@ -29,10 +35,12 @@ const Embedded = ({ mainPanelClassName, className }: EmbeddedDevToolsProps) => {
 			}}
 			className={clsx("react-router-dev-tools", "h-full flex-row w-full", className)}
 		>
-			<MainPanel className={mainPanelClassName} isEmbedded isOpen={true}>
-				<Tabs />
-				<ContentPanel />
-			</MainPanel>
+			{isOpen ? (
+				<MainPanel className={mainPanelClassName} isEmbedded isOpen={true}>
+					<Tabs />
+					<ContentPanel />
+				</MainPanel>
+			) : null}
 		</div>
 	)
 }