fix: ux issue (empty menu items + refetch on scroll)

Assisted-by: Claude Opus 5.5

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -68,10 +68,13 @@ function TraceDetailsHeader({
 	const isOverview = tab === TraceDetailsTab.Overview;
 
 	// Overview-only panels must not linger over another tab.
+	// The filter query lives in Filters' local state, which unmounts with the
+	// Overview tab; drop its result too so both start empty on return.
 	useEffect(() => {
 		setIsPreviewFieldsOpen(false);
 		setIsAnalyticsOpen(false);
-	}, [tab]);
+		onFilteredSpansChange([], false);
+	}, [tab, onFilteredSpansChange]);
 	const previewFields = useTraceStore((s) => s.previewFields);
 	const setPreviewFields = useTraceStore((s) => s.setPreviewFields);
 

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/__tests__/TraceDetailsHeader.test.tsx

@@ -383,6 +383,16 @@ describe('TraceDetailsHeader – tabs', () => {
 		expect(screen.getByText(metadataText)).toBeInTheDocument();
 	});
 
+	it('clears the filter result when switching to the Thread tab', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderHeader();
+		baseProps.onFilteredSpansChange.mockClear();
+
+		await user.click(screen.getByTestId('trace-details-tab-thread'));
+
+		expect(baseProps.onFilteredSpansChange).toHaveBeenCalledWith([], false);
+	});
+
 	it('closes the Analytics panel when switching to the Thread tab', async () => {
 		const user = userEvent.setup({ delay: null });
 		renderHeader();

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 import { TraceDetailsTab } from './constants';
 import { useTraceDetailsTab } from './hooks/useTraceDetailsTab';
@@ -13,6 +13,8 @@ function TraceDetailsV3(): JSX.Element {
 	const [filteredSpanIds, setFilteredSpanIds] = useState<string[]>([]);
 	const [isFilterActive, setIsFilterActive] = useState(false);
 	const [hasTraceData, setHasTraceData] = useState(false);
+	// Tracks which traceId the load event already fired for, so navigating
+	// between traces (the route component stays mounted) re-fires it once each.
 	const dataLoadedFiredForRef = useRef<string>('');
 
 	const handleFilteredSpansChange = useCallback(
@@ -23,14 +25,6 @@ function TraceDetailsV3(): JSX.Element {
 		[],
 	);
 
-	// The filter query lives in Filters' local state, which unmounts with the
-	// Overview tab; drop its result too so both start empty on return.
-	useEffect(() => {
-		if (!isOverview) {
-			handleFilteredSpansChange([], false);
-		}
-	}, [isOverview, handleFilteredSpansChange]);
-
 	return (
 		<TraceDetailsWrapper>
 			<TraceDetailsHeader