fix: added loading indicators in traces pages when running query (#8782)

frontend/src/container/TimeSeriesView/index.tsx

@@ -20,6 +20,7 @@ function TimeSeriesViewContainer({
 	dataSource = DataSource.TRACES,
 	isFilterApplied,
 	setWarning,
+	setIsLoadingQueries,
 }: TimeSeriesViewProps): JSX.Element {
 	const { stagedQuery, currentQuery, panelType } = useQueryBuilder();
 
@@ -83,6 +84,14 @@ function TimeSeriesViewContainer({
 		[data, isValidToConvertToMs],
 	);
 
+	useEffect(() => {
+		if (isLoading || isFetching) {
+			setIsLoadingQueries(true);
+		} else {
+			setIsLoadingQueries(false);
+		}
+	}, [isLoading, isFetching, setIsLoadingQueries]);
+
 	return (
 		<TimeSeriesView
 			isFilterApplied={isFilterApplied}
@@ -101,6 +110,7 @@ interface TimeSeriesViewProps {
 	dataSource?: DataSource;
 	isFilterApplied: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
+	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
 }
 
 TimeSeriesViewContainer.defaultProps = {

frontend/src/container/TracesExplorer/ListView/index.tsx

@@ -49,9 +49,14 @@ import { getListColumns, transformDataWithDate } from './utils';
 interface ListViewProps {
 	isFilterApplied: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
+	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
 }
 
-function ListView({ isFilterApplied, setWarning }: ListViewProps): JSX.Element {
+function ListView({
+	isFilterApplied,
+	setWarning,
+	setIsLoadingQueries,
+}: ListViewProps): JSX.Element {
 	const {
 		stagedQuery,
 		panelType: panelTypeFromQueryBuilder,
@@ -162,6 +167,14 @@ function ListView({ isFilterApplied, setWarning }: ListViewProps): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [data?.payload, data?.warning]);
 
+	useEffect(() => {
+		if (isLoading || isFetching) {
+			setIsLoadingQueries(true);
+		} else {
+			setIsLoadingQueries(false);
+		}
+	}, [isLoading, isFetching, setIsLoadingQueries]);
+
 	const dataLength =
 		data?.payload?.data?.newResult?.data?.result[0]?.list?.length;
 	const totalCount = useMemo(() => dataLength || 0, [dataLength]);

frontend/src/container/TracesExplorer/TableView/index.tsx

@@ -16,8 +16,10 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 
 function TableView({
 	setWarning,
+	setIsLoadingQueries,
 }: {
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
+	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
 }): JSX.Element {
 	const { stagedQuery, panelType } = useQueryBuilder();
 
@@ -26,7 +28,7 @@ function TableView({
 		GlobalReducer
 	>((state) => state.globalTime);
 
-	const { data, isLoading, isError, error } = useGetQueryRange(
+	const { data, isLoading, isFetching, isError, error } = useGetQueryRange(
 		{
 			query: stagedQuery || initialQueriesMap.traces,
 			graphType: panelType || PANEL_TYPES.TABLE,
@@ -49,6 +51,14 @@ function TableView({
 		},
 	);
 
+	useEffect(() => {
+		if (isLoading || isFetching) {
+			setIsLoadingQueries(true);
+		} else {
+			setIsLoadingQueries(false);
+		}
+	}, [isLoading, isFetching, setIsLoadingQueries]);
+
 	const queryTableData = useMemo(
 		() =>
 			data?.payload?.data?.newResult?.data?.result ||

frontend/src/container/TracesExplorer/TracesView/index.tsx

@@ -40,11 +40,13 @@ import { ActionsContainer, Container } from './styles';
 interface TracesViewProps {
 	isFilterApplied: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
+	setIsLoadingQueries: Dispatch<SetStateAction<boolean>>;
 }
 
 function TracesView({
 	isFilterApplied,
 	setWarning,
+	setIsLoadingQueries,
 }: TracesViewProps): JSX.Element {
 	const { stagedQuery, panelType } = useQueryBuilder();
 	const [orderBy, setOrderBy] = useState<string>('timestamp:desc');
@@ -117,6 +119,14 @@ function TracesView({
 		[responseData],
 	);
 
+	useEffect(() => {
+		if (isLoading || isFetching) {
+			setIsLoadingQueries(true);
+		} else {
+			setIsLoadingQueries(false);
+		}
+	}, [isLoading, isFetching, setIsLoadingQueries]);
+
 	useEffect(() => {
 		if (!isLoading && !isFetching && !isError && (tableData || []).length !== 0) {
 			logEvent('Traces Explorer: Data present', {

frontend/src/pages/TracesExplorer/index.tsx

@@ -69,6 +69,7 @@ function TracesExplorer(): JSX.Element {
 
 	// Get panel type from URL
 	const panelTypesFromUrl = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
+	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
 
 	const [selectedView, setSelectedView] = useState<ExplorerViews>(() =>
 		getExplorerViewFromUrl(searchParams, panelTypesFromUrl),
@@ -323,6 +324,7 @@ function TracesExplorer(): JSX.Element {
 							rightActions={
 								<RightToolbarActions
 									onStageRunQuery={(): void => handleRunQuery(true, true)}
+									isLoadingQueries={isLoadingQueries}
 								/>
 							}
 						/>
@@ -344,13 +346,21 @@ function TracesExplorer(): JSX.Element {
 
 						{selectedView === ExplorerViews.LIST && (
 							<div className="trace-explorer-list-view">
-								<ListView isFilterApplied={isFilterApplied} setWarning={setWarning} />
+								<ListView
+									isFilterApplied={isFilterApplied}
+									setWarning={setWarning}
+									setIsLoadingQueries={setIsLoadingQueries}
+								/>
 							</div>
 						)}
 
 						{selectedView === ExplorerViews.TRACE && (
 							<div className="trace-explorer-traces-view">
-								<TracesView isFilterApplied={isFilterApplied} setWarning={setWarning} />
+								<TracesView
+									isFilterApplied={isFilterApplied}
+									setWarning={setWarning}
+									setIsLoadingQueries={setIsLoadingQueries}
+								/>
 							</div>
 						)}
 
@@ -360,13 +370,17 @@ function TracesExplorer(): JSX.Element {
 									dataSource={DataSource.TRACES}
 									isFilterApplied={isFilterApplied}
 									setWarning={setWarning}
+									setIsLoadingQueries={setIsLoadingQueries}
 								/>
 							</div>
 						)}
 
 						{selectedView === ExplorerViews.TABLE && (
 							<div className="trace-explorer-table-view">
-								<TableView setWarning={setWarning} />
+								<TableView
+									setWarning={setWarning}
+									setIsLoadingQueries={setIsLoadingQueries}
+								/>
 							</div>
 						)}
 					</div>