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

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

@@ -68,13 +68,10 @@ 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);
-		onFilteredSpansChange([], false);
-	}, [tab, onFilteredSpansChange]);
+	}, [tab]);
 	const previewFields = useTraceStore((s) => s.previewFields);
 	const setPreviewFields = useTraceStore((s) => s.setPreviewFields);
 

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

@@ -383,16 +383,6 @@ 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, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { TraceDetailsTab } from './constants';
 import { useTraceDetailsTab } from './hooks/useTraceDetailsTab';
@@ -13,8 +13,6 @@ 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(
@@ -25,6 +23,14 @@ 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