Revert "feat: show spinner on expanding span and fix autoscroll"

This reverts commit 6bd194dfb4.

frontend/src/container/TraceWaterfall/TraceWaterfall.tsx

@@ -15,7 +15,6 @@ import './TraceWaterfall.styles.scss';
 export interface IInterestedSpan {
 	spanId: string;
 	isUncollapsed: boolean;
-	shouldScrollToSpan?: boolean;
 }
 
 interface ITraceWaterfallProps {
@@ -110,7 +109,6 @@ function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
 						setTraceFlamegraphStatsWidth={setTraceFlamegraphStatsWidth}
 						selectedSpan={selectedSpan}
 						setSelectedSpan={setSelectedSpan}
-						isFetchingTraceData={isFetchingTraceData}
 					/>
 				);
 			default:
@@ -119,7 +117,6 @@ function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
 	}, [
 		errorFetchingTraceData,
 		interestedSpanId,
-		isFetchingTraceData,
 		selectedSpan,
 		setInterestedSpanId,
 		setSelectedSpan,

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -30,7 +30,6 @@ import {
 	ChevronDown,
 	ChevronRight,
 	Leaf,
-	Loader2,
 } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { Span } from 'types/api/trace/getTraceV2';
@@ -44,20 +43,6 @@ import './Success.styles.scss';
 const CONNECTOR_WIDTH = 28;
 const VERTICAL_CONNECTOR_WIDTH = 1;
 
-// Component to render chevron icon with spinner
-function ChevronIcon({
-	isFetching,
-	isCollapsed,
-}: {
-	isFetching: boolean;
-	isCollapsed: boolean;
-}): JSX.Element {
-	if (isFetching) {
-		return <Loader2 size={14} className="animate-spin" />;
-	}
-	return isCollapsed ? <ChevronRight size={14} /> : <ChevronDown size={14} />;
-}
-
 interface ITraceMetadata {
 	traceId: string;
 	startTime: number;
@@ -73,7 +58,6 @@ interface ISuccessProps {
 	setTraceFlamegraphStatsWidth: Dispatch<SetStateAction<number>>;
 	selectedSpan: Span | undefined;
 	setSelectedSpan: Dispatch<SetStateAction<Span | undefined>>;
-	isFetchingTraceData: boolean;
 }
 
 function SpanOverview({
@@ -86,8 +70,6 @@ function SpanOverview({
 	filteredSpanIds,
 	isFilterActive,
 	traceMetadata,
-	isFetchingTraceData,
-	interestedSpanId,
 }: {
 	span: Span;
 	isSpanCollapsed: boolean;
@@ -98,8 +80,6 @@ function SpanOverview({
 	filteredSpanIds: string[];
 	isFilterActive: boolean;
 	traceMetadata: ITraceMetadata;
-	isFetchingTraceData: boolean;
-	interestedSpanId: IInterestedSpan;
 }): JSX.Element {
 	const isRootSpan = span.level === 0;
 	const { hasEditPermission } = useAppContext();
@@ -165,12 +145,11 @@ function SpanOverview({
 									}}
 									className="collapse-uncollapse-button"
 								>
-									<ChevronIcon
-										isFetching={
-											isFetchingTraceData && interestedSpanId.spanId === span.spanId
-										}
-										isCollapsed={isSpanCollapsed}
-									/>
+									{isSpanCollapsed ? (
+										<ChevronRight size={14} />
+									) : (
+										<ChevronDown size={14} />
+									)}
 									<Typography.Text className="children-count">
 										{span.subTreeNodeCount}
 									</Typography.Text>
@@ -363,8 +342,6 @@ function getWaterfallColumns({
 	handleAddSpanToFunnel,
 	filteredSpanIds,
 	isFilterActive,
-	isFetchingTraceData,
-	interestedSpanId,
 }: {
 	handleCollapseUncollapse: (id: string, collapse: boolean) => void;
 	uncollapsedNodes: string[];
@@ -374,10 +351,8 @@ function getWaterfallColumns({
 	handleAddSpanToFunnel: (span: Span) => void;
 	filteredSpanIds: string[];
 	isFilterActive: boolean;
-	isFetchingTraceData: boolean;
-	interestedSpanId: IInterestedSpan;
-}): ColumnDef<Span, string>[] {
-	const waterfallColumns: ColumnDef<Span, string>[] = [
+}): ColumnDef<Span, any>[] {
+	const waterfallColumns: ColumnDef<Span, any>[] = [
 		columnDefHelper.display({
 			id: 'span-name',
 			header: '',
@@ -392,8 +367,6 @@ function getWaterfallColumns({
 					traceMetadata={traceMetadata}
 					filteredSpanIds={filteredSpanIds}
 					isFilterActive={isFilterActive}
-					isFetchingTraceData={isFetchingTraceData}
-					interestedSpanId={interestedSpanId}
 				/>
 			),
 			size: 450,
@@ -438,7 +411,6 @@ function Success(props: ISuccessProps): JSX.Element {
 		setTraceFlamegraphStatsWidth,
 		setSelectedSpan,
 		selectedSpan,
-		isFetchingTraceData,
 	} = props;
 
 	const [filteredSpanIds, setFilteredSpanIds] = useState<string[]>([]);
@@ -455,11 +427,7 @@ function Success(props: ISuccessProps): JSX.Element {
 
 	const handleCollapseUncollapse = useCallback(
 		(spanId: string, collapse: boolean) => {
-			setInterestedSpanId({
-				spanId,
-				isUncollapsed: !collapse,
-				shouldScrollToSpan: false,
-			});
+			setInterestedSpanId({ spanId, isUncollapsed: !collapse });
 		},
 		[setInterestedSpanId],
 	);
@@ -477,11 +445,7 @@ function Success(props: ISuccessProps): JSX.Element {
 		if (range?.startIndex === 0 && instance.isScrolling) {
 			// do not trigger for trace root as nothing to fetch above
 			if (spans[0].level !== 0) {
-				setInterestedSpanId({
-					spanId: spans[0].spanId,
-					isUncollapsed: false,
-					shouldScrollToSpan: false,
-				});
+				setInterestedSpanId({ spanId: spans[0].spanId, isUncollapsed: false });
 			}
 			return;
 		}
@@ -490,7 +454,6 @@ function Success(props: ISuccessProps): JSX.Element {
 			setInterestedSpanId({
 				spanId: spans[spans.length - 1].spanId,
 				isUncollapsed: false,
-				shouldScrollToSpan: false,
 			});
 		}
 	};
@@ -532,8 +495,6 @@ function Success(props: ISuccessProps): JSX.Element {
 				handleAddSpanToFunnel,
 				filteredSpanIds,
 				isFilterActive,
-				isFetchingTraceData,
-				interestedSpanId,
 			}),
 		[
 			handleCollapseUncollapse,
@@ -544,8 +505,6 @@ function Success(props: ISuccessProps): JSX.Element {
 			handleAddSpanToFunnel,
 			filteredSpanIds,
 			isFilterActive,
-			isFetchingTraceData,
-			interestedSpanId,
 		],
 	);
 
@@ -555,16 +514,12 @@ function Success(props: ISuccessProps): JSX.Element {
 				(span) => span.spanId === interestedSpanId.spanId,
 			);
 			if (idx !== -1) {
-				// Only scroll to center when navigating (URL/flamegraph), not on
-				// expand/collapse or virtualizer boundary fetches.
-				if (interestedSpanId.shouldScrollToSpan) {
-					setTimeout(() => {
-						virtualizerRef.current?.scrollToIndex(idx, {
-							align: 'center',
-							behavior: 'auto',
-						});
-					}, 400);
-				}
+				setTimeout(() => {
+					virtualizerRef.current?.scrollToIndex(idx, {
+						align: 'center',
+						behavior: 'auto',
+					});
+				}, 400);
 
 				setSelectedSpan(spans[idx]);
 			}

frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx

@@ -30,7 +30,6 @@ function TraceDetailsV2(): JSX.Element {
 		() => ({
 			spanId: urlQuery.get('spanId') || '',
 			isUncollapsed: urlQuery.get('spanId') !== '',
-			shouldScrollToSpan: urlQuery.get('spanId') !== '',
 		}),
 	);
 	const [
@@ -44,7 +43,6 @@ function TraceDetailsV2(): JSX.Element {
 		setInterestedSpanId({
 			spanId: urlQuery.get('spanId') || '',
 			isUncollapsed: urlQuery.get('spanId') !== '',
-			shouldScrollToSpan: true,
 		});
 	}, [urlQuery]);