[Fix]: the loading state based on the time interval (#3755)

* fix: the loading state based on the time interval

* fix: failing of query-range api

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Skeleton, Typography } from 'antd';
 import { ToggleGraphProps } from 'components/Graph/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import GridPanelSwitch from 'container/GridPanelSwitch';
@@ -249,20 +249,23 @@ function WidgetGraphComponent({
 					isWarning={isWarning}
 				/>
 			</div>
-			<GridPanelSwitch
+			{queryResponse.isLoading && <Skeleton />}
-				panelType={widget.panelTypes}
+			{queryResponse.isSuccess && (
-				data={data}
+				<GridPanelSwitch
-				isStacked={widget.isStacked}
+					panelType={widget.panelTypes}
-				opacity={widget.opacity}
+					data={data}
-				title={' '}
+					isStacked={widget.isStacked}
-				name={name}
+					opacity={widget.opacity}
-				yAxisUnit={widget.yAxisUnit}
+					title={' '}
-				onClickHandler={onClickHandler}
+					name={name}
-				onDragSelect={onDragSelect}
+					yAxisUnit={widget.yAxisUnit}
-				panelData={queryResponse.data?.payload?.data.newResult.data.result || []}
+					onClickHandler={onClickHandler}
-				query={widget.query}
+					onDragSelect={onDragSelect}
-				ref={lineChartRef}
+					panelData={queryResponse.data?.payload?.data.newResult.data.result || []}
-			/>
+					query={widget.query}
+					ref={lineChartRef}
+				/>
+			)}
 		</span>
 	);
 }

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -1,4 +1,3 @@
-import { Skeleton } from 'antd';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useStepInterval } from 'hooks/queryBuilder/useStepInterval';
@@ -99,10 +98,6 @@ function GridCardGraph({
 
 	const isEmptyLayout = widget?.id === PANEL_TYPES.EMPTY_WIDGET;
 
-	if (queryResponse.isLoading) {
-		return <Skeleton />;
-	}
-
 	return (
 		<span ref={graphRef}>
 			<WidgetGraphComponent

frontend/src/container/MetricsApplication/Tabs/Overview.tsx

@@ -92,8 +92,8 @@ function Application(): JSX.Element {
 
 	const {
 		data: topLevelOperations,
-		isLoading: topLevelOperationsLoading,
 		error: topLevelOperationsError,
+		isLoading: topLevelOperationsIsLoading,
 		isError: topLevelOperationsIsError,
 	} = useQuery<ServiceDataProps>({
 		queryKey: [servicename, minTime, maxTime, selectedTags],
@@ -199,7 +199,7 @@ function Application(): JSX.Element {
 						selectedTimeStamp={selectedTimeStamp}
 						selectedTraceTags={selectedTraceTags}
 						topLevelOperationsRoute={topLevelOperationsRoute}
-						topLevelOperationsLoading={topLevelOperationsLoading}
+						topLevelOperationsIsLoading={topLevelOperationsIsLoading}
 					/>
 				</Col>
 
@@ -220,11 +220,11 @@ function Application(): JSX.Element {
 						handleGraphClick={handleGraphClick}
 						onDragSelect={onDragSelect}
 						topLevelOperationsError={topLevelOperationsError}
-						topLevelOperationsLoading={topLevelOperationsLoading}
 						topLevelOperationsIsError={topLevelOperationsIsError}
 						name="operations_per_sec"
 						widget={operationPerSecWidget}
 						opName="Rate"
+						topLevelOperationsIsLoading={topLevelOperationsIsLoading}
 					/>
 				</Col>
 			</Row>
@@ -264,11 +264,11 @@ function Application(): JSX.Element {
 							handleGraphClick={handleGraphClick}
 							onDragSelect={onDragSelect}
 							topLevelOperationsError={topLevelOperationsError}
-							topLevelOperationsLoading={topLevelOperationsLoading}
 							topLevelOperationsIsError={topLevelOperationsIsError}
 							name="error_percentage_%"
 							widget={errorPercentageWidget}
 							opName="Error"
+							topLevelOperationsIsLoading={topLevelOperationsIsLoading}
 						/>
 					</ColErrorContainer>
 				</Col>

frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx

@@ -1,4 +1,3 @@
-import Spinner from 'components/Spinner';
 import { FeatureKeys } from 'constants/features';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import Graph from 'container/GridCardLayout/GridCard';
@@ -25,7 +24,7 @@ function ServiceOverview({
 	selectedTraceTags,
 	selectedTimeStamp,
 	topLevelOperationsRoute,
-	topLevelOperationsLoading,
+	topLevelOperationsIsLoading,
 }: ServiceOverviewProps): JSX.Element {
 	const { servicename } = useParams<IServiceName>();
 
@@ -64,15 +63,8 @@ function ServiceOverview({
 		[servicename, isSpanMetricEnable, topLevelOperationsRoute, tagFilterItems],
 	);
 
-	const isQueryEnabled = topLevelOperationsRoute.length > 0;
+	const isQueryEnabled =
-
+		!topLevelOperationsIsLoading && topLevelOperationsRoute.length > 0;
-	if (topLevelOperationsLoading) {
-		return (
-			<Card>
-				<Spinner height="40vh" tip="Loading..." />
-			</Card>
-		);
-	}
 
 	return (
 		<>
@@ -109,7 +101,7 @@ interface ServiceOverviewProps {
 	onDragSelect: (start: number, end: number) => void;
 	handleGraphClick: (type: string) => ClickHandlerType;
 	topLevelOperationsRoute: string[];
-	topLevelOperationsLoading: boolean;
+	topLevelOperationsIsLoading: boolean;
 }
 
 export default ServiceOverview;

frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx

@@ -1,6 +1,5 @@
 import { Typography } from 'antd';
 import axios from 'axios';
-import Spinner from 'components/Spinner';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import Graph from 'container/GridCardLayout/GridCard';
 import { Card, GraphContainer } from 'container/MetricsApplication/styles';
@@ -13,10 +12,10 @@ function TopLevelOperation({
 	opName,
 	topLevelOperationsIsError,
 	topLevelOperationsError,
-	topLevelOperationsLoading,
 	onDragSelect,
 	handleGraphClick,
 	widget,
+	topLevelOperationsIsLoading,
 }: TopLevelOperationProps): JSX.Element {
 	return (
 		<Card>
@@ -28,17 +27,13 @@ function TopLevelOperation({
 				</Typography>
 			) : (
 				<GraphContainer>
-					{topLevelOperationsLoading && (
+					<Graph
-						<Spinner size="large" tip="Loading..." height="40vh" />
+						name={name}
-					)}
+						widget={widget}
-					{!topLevelOperationsLoading && (
+						onClickHandler={handleGraphClick(opName)}
-						<Graph
+						onDragSelect={onDragSelect}
-							name={name}
+						isQueryEnabled={!topLevelOperationsIsLoading}
-							widget={widget}
+					/>
-							onClickHandler={handleGraphClick(opName)}
-							onDragSelect={onDragSelect}
-						/>
-					)}
 				</GraphContainer>
 			)}
 		</Card>
@@ -50,10 +45,10 @@ interface TopLevelOperationProps {
 	opName: string;
 	topLevelOperationsIsError: boolean;
 	topLevelOperationsError: unknown;
-	topLevelOperationsLoading: boolean;
 	onDragSelect: (start: number, end: number) => void;
 	handleGraphClick: (type: string) => ClickHandlerType;
 	widget: Widgets;
+	topLevelOperationsIsLoading: boolean;
 }
 
 export default TopLevelOperation;