From 6adeef7e70fdc5473c332c4d48eb3cc2d93102b1 Mon Sep 17 00:00:00 2001
From: Sagar Rajput <sagarrajput@192.168.1.2>
Date: Wed, 13 Mar 2024 17:50:17 +0530
Subject: [PATCH] feat: added isFetching condition and changed series color

---
 .../BillingContainer/BillingContainer.tsx     | 20 ++++++++++---------
 .../BillingUsageGraph/BillingUsageGraph.tsx   |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/src/container/BillingContainer/BillingContainer.tsx b/frontend/src/container/BillingContainer/BillingContainer.tsx
index 54a9aa0ac8..b31f9c4745 100644
--- a/frontend/src/container/BillingContainer/BillingContainer.tsx
+++ b/frontend/src/container/BillingContainer/BillingContainer.tsx
@@ -186,7 +186,7 @@ export default function BillingContainer(): JSX.Element {
 		[licensesData?.payload?.onTrial],
 	);
 
-	const { isLoading } = useQuery(
+	const { isLoading, isFetching: isFetchingBillingData } = useQuery(
 		[REACT_QUERY_KEY.GET_BILLING_USAGE, user?.userId],
 		{
 			queryFn: () => getUsage(activeLicense?.key || ''),
@@ -332,14 +332,14 @@ export default function BillingContainer(): JSX.Element {
 
 	const BillingUsageGraphCallback = useCallback(
 		() =>
-			!isLoading ? (
+			!isLoading && !isFetchingBillingData ? (
 				<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
 			) : (
 				<Card className="empty-graph-card" bordered={false}>
 					<Spinner size="large" tip="Loading..." height="35vh" />
 				</Card>
 			),
-		[apiResponse, billAmount, isLoading],
+		[apiResponse, billAmount, isLoading, isFetchingBillingData],
 	);
 
 	return (
@@ -364,9 +364,11 @@ export default function BillingContainer(): JSX.Element {
 							{isCloudUserVal ? 'Enterprise Cloud' : 'Enterprise'}{' '}
 							{isFreeTrial ? <Tag color="success"> Free Trial </Tag> : ''}
 						</Typography.Title>
-						<Typography.Text style={{ fontSize: 12, color: Color.BG_VANILLA_400 }}>
-							{daysRemaining} {daysRemainingStr}
-						</Typography.Text>
+						{!isLoading && !isFetchingBillingData ? (
+							<Typography.Text style={{ fontSize: 12, color: Color.BG_VANILLA_400 }}>
+								{daysRemaining} {daysRemainingStr}
+							</Typography.Text>
+						) : null}
 					</Flex>
 					<Button
 						type="primary"
@@ -392,7 +394,7 @@ export default function BillingContainer(): JSX.Element {
 						</Typography.Text>
 					)}
 
-				{!isLoading ? (
+				{!isLoading && !isFetchingBillingData ? (
 					<Alert
 						message={headerText}
 						type="info"
@@ -407,7 +409,7 @@ export default function BillingContainer(): JSX.Element {
 			<BillingUsageGraphCallback />
 
 			<div className="billing-details">
-				{!isLoading && (
+				{!isLoading && !isFetchingBillingData && (
 					<Table
 						columns={columns}
 						dataSource={data}
@@ -416,7 +418,7 @@ export default function BillingContainer(): JSX.Element {
 					/>
 				)}
 
-				{isLoading && renderTableSkeleton()}
+				{(isLoading || isFetchingBillingData) && renderTableSkeleton()}
 			</div>
 
 			{isFreeTrial && !licensesData?.payload?.trialConvertedToSubscription && (
diff --git a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
index fcbba624e3..fa6ce813a6 100644
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
@@ -81,7 +81,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 		() => [
 			{ label: 'Timestamp', stroke: 'purple' },
 			getGraphSeries(
-				'#DECCBC',
+				'#7CEDBE',
 				graphCompatibleData.data.result[0]?.legend as string,
 			),
 			getGraphSeries(