fix bugs

Author: AlemTuzlak

packages/react-router-devtools/src/client/components/network-tracer/NetworkWaterfall.tsx

@@ -64,7 +64,6 @@ const NetworkWaterfall: React.FC<Props> = ({ requests, width }) => {
 	const [now, setNow] = useState(Date.now())
 	const [activeTypeFilter, setActiveTypeFilter] = useState<EventType | "all">("all")
 	const [activeRouteFilters, setActiveRouteFilters] = useState<Set<string>>(new Set())
-	const selectedRequest = selectedRequestIndex !== null ? requests[selectedRequestIndex] : null
 
 	// Get unique routes from all requests
 	const uniqueRoutes = Array.from(new Set(requests.map((req) => req.routeId))).sort()
@@ -82,10 +81,21 @@ const NetworkWaterfall: React.FC<Props> = ({ requests, width }) => {
 		filteredRequests = filteredRequests.filter((req) => activeRouteFilters.has(req.routeId))
 	}
 
+	// Get the selected request from the filtered list
+	const selectedRequest = selectedRequestIndex !== null ? filteredRequests[selectedRequestIndex] : null
+
 	// Check if there are any active requests
 	const hasActiveRequests = filteredRequests.some(
 		(req) => !req.endTime || (req.endTime && now - req.endTime < INACTIVE_THRESHOLD)
 	)
+
+	// Reset selected index when filters change and current selection is out of bounds
+	useEffect(() => {
+		if (selectedRequestIndex !== null && selectedRequestIndex >= filteredRequests.length) {
+			setSelectedRequest(null)
+		}
+	}, [selectedRequestIndex, filteredRequests.length])
+
 	useEffect(() => {
 		if (!hasActiveRequests) {
 			return

packages/react-router-devtools/src/vite/plugin.tsx

@@ -187,6 +187,14 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 	const appDir = cachedAppDir || "./app"
 	const appDirName = appDir.replace("./", "")
 
+	// Load routes eagerly so they're available during transformation
+	let routesLoaded = false
+	const ensureRoutesLoaded = async () => {
+		if (!routesLoaded) {
+			routesLoaded = await loadRoutes()
+		}
+	}
+
 	const shouldInject = (mode: string | undefined, include: boolean) => mode === "development" || include
 	const isTransformable = (id: string) => {
 		const extensions = [".tsx", ".jsx", ".ts", ".js"]
@@ -269,7 +277,8 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 			apply(config) {
 				return shouldInject(config.mode, includeDevtools)
 			},
-			transform(code, id) {
+			async transform(code, id) {
+				await ensureRoutesLoaded()
 				const routeId = isTransformable(id)
 				if (!routeId) {
 					return
@@ -283,7 +292,8 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 			apply(config) {
 				return shouldInject(config.mode, includeServer)
 			},
-			transform(code, id) {
+			async transform(code, id) {
+				await ensureRoutesLoaded()
 				const routeId = isTransformable(id)
 				if (!routeId) {
 					return
@@ -297,7 +307,8 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 			apply(config) {
 				return shouldInject(config.mode, includeServer)
 			},
-			transform(code, id) {
+			async transform(code, id) {
+				await ensureRoutesLoaded()
 				const routeId = isTransformable(id)
 				if (!routeId) {
 					return