From db8536100cab7db1089c937c4e8a666b58dc6aff Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Mon, 9 Jun 2025 18:10:37 +0530 Subject: [PATCH] feat: add loading state with timeout for ThroughputSummary and ROISummary components --- .../ui/analysis/ProductionCapacity.tsx | 13 +- app/src/components/ui/analysis/ROISummary.tsx | 246 +++++++++--------- .../ui/analysis/ThroughputSummary.tsx | 115 ++++---- 3 files changed, 194 insertions(+), 180 deletions(-) diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx index 0bc8b91..2733827 100644 --- a/app/src/components/ui/analysis/ProductionCapacity.tsx +++ b/app/src/components/ui/analysis/ProductionCapacity.tsx @@ -91,8 +91,11 @@ const ThroughputSummary: React.FC = () => { const [isLoading, setIsLoading] = useState(true); useEffect(() => { - if (productionCapacityData >= 0) { - setIsLoading(false); + if (productionCapacityData >0) { + setTimeout(() => { + + setIsLoading(false); + }, 3000); console.log("productionCapacityData: ", productionCapacityData); } else { setIsLoading(true); @@ -100,7 +103,8 @@ const ThroughputSummary: React.FC = () => { }, [productionCapacityData]); return ( -
+ <> + {!isLoading &&
@@ -184,7 +188,8 @@ const ThroughputSummary: React.FC = () => { )}
-
+
} + ); }; diff --git a/app/src/components/ui/analysis/ROISummary.tsx b/app/src/components/ui/analysis/ROISummary.tsx index dc33663..e7cfc52 100644 --- a/app/src/components/ui/analysis/ROISummary.tsx +++ b/app/src/components/ui/analysis/ROISummary.tsx @@ -84,135 +84,142 @@ const ROISummary = ({ const { roiSummary } = useROISummaryData(); useEffect(() => { - if (roiSummary && typeof roiSummary === "object") { - setIsLoading(false); // Data loaded + if (roiSummary.productName) { + // If productName is set, assume data is loaded + setTimeout(() => { + + setIsLoading(false); + }, 3000); + // setIsLoading(false); } else { - setIsLoading(true); // Show skeleton while loading + // If productName is empty, assume still loading + setIsLoading(true); } }, [roiSummary]); return ( -
-
-
-
-
ROI Summary
-
From {getCurrentDate()}
-
-
- -
-
- {!isLoading ? ( - <> -
- -
Product :
-
{roiSummary.productName}
+ <> + {!isLoading &&
+
+
+
+
ROI Summary
+
From {getCurrentDate()}
-
- -
-
- {roiSummary.roiPercentage}% ROI with payback - in just {roiSummary.paybackPeriod} months +
+ +
+
+ {!isLoading ? ( + <> +
+ +
Product :
+
{roiSummary.productName}
-
-
-
- -
- you're on track to hit it by -
July 2029
+
+ +
+
+ {roiSummary.roiPercentage}% ROI with payback + in just {roiSummary.paybackPeriod} months
-
-
-
- Total Cost Incurred - - ₹ - {roiSummary.totalCost} - +
+
+ +
+ you're on track to hit it by +
July 2029
-
- Revenue Generated - - ₹ +
+
+
+
+ Total Cost Incurred + + ₹ + {roiSummary.totalCost} + +
+
+ Revenue Generated + + ₹ - {roiSummary.revenueGenerated} - + {roiSummary.revenueGenerated} + +
+
0 ? "profit" : "loss"}`} + > +
+ ↑ + Net Profit +
+
+ ₹ + {roiSummary.netProfit > 0 + ? roiSummary.netProfit + : roiSummary.netLoss} +
+
+
+
+
+
+
+ + Cost Breakdown +
+ + + +
0 ? "profit" : "loss"}`} + className={`breakdown-table-wrapper ${isTableOpen ? "open" : "closed" + }`} + style={{ + transition: "max-height 0.3s ease-in-out", + overflow: "hidden", + }} > -
- ↑ - Net Profit -
-
- ₹ - {roiSummary.netProfit > 0 - ? roiSummary.netProfit - : roiSummary.netLoss} -
-
-
-
-
-
-
- - Cost Breakdown -
- - - - -
-
- - - - - - - - - - - - {roiSummaryData.costBreakdown.map((row, index) => ( - - - - - - +
ItemUnit CostLabor CostTotal CostSelling Price
{row.item}{row.unitCost}{row.laborCost}{row.totalCost}{row.sellingPrice}
+ + + + + + + - ))} - -
ItemUnit CostLabor CostTotal CostSelling Price
+ + + {roiSummaryData.costBreakdown.map((row, index) => ( + + {row.item} + {row.unitCost} + {row.laborCost} + {row.totalCost} + {row.sellingPrice} + + ))} + + +
-
- {/*
+ {/*
@@ -232,13 +239,14 @@ const ROISummary = ({
Get ROI Boost Tips
*/} - - ) : ( - - //
No Data
- )} -
-
+ + ) : ( + + //
No Data
+ )} +
+
} + ); }; diff --git a/app/src/components/ui/analysis/ThroughputSummary.tsx b/app/src/components/ui/analysis/ThroughputSummary.tsx index bf570f9..254efd3 100644 --- a/app/src/components/ui/analysis/ThroughputSummary.tsx +++ b/app/src/components/ui/analysis/ThroughputSummary.tsx @@ -30,72 +30,73 @@ const ProductionCapacity = ({ const [isLoading, setIsLoading] = useState(false); useEffect(() => { - if (throughputData >= 0) { - // console.log('machineActiveTime: ', machineActiveTime); - // console.log('materialCycleTime: ', materialCycleTime); - // console.log('throughputData: ', throughputData); - // console.log('productionCapacityData: ', productionCapacityData); + console.log('throughputData: ', throughputData > 0); + if (throughputData > 0) { + setIsLoading(false); + } else { setIsLoading(true); } }, [throughputData]) return ( -
-
-
-
-
Throughput Summary
-
- {timeRange.startTime} - {timeRange.endTime} + <> + {!isLoading &&
+
+
+
+
Throughput Summary
+
+ {timeRange.startTime} - {timeRange.endTime} +
+
+
+
-
- -
+ {!isLoading ? ( + <> +
+
+ {throughputData} Units/hour + +
+ + {/* Dynamic Progress Bar */} +
+ {[...Array(totalBars)].map((_, i) => ( +
+ {i < barsToFill ? ( +
+ ) : i === barsToFill ? ( +
+ ) : null} +
+ ))} +
+
+ +
+
+ Avg. Process Time + {materialCycleTime} secs/unit +
+
+ Machine Utilization + {machineActiveTime} + {/* {machineActiveTime} */} +
+
+ + ) : ( + + )}
- {isLoading ? ( - <> -
-
- {throughputData} Units/hour - -
- - {/* Dynamic Progress Bar */} -
- {[...Array(totalBars)].map((_, i) => ( -
- {i < barsToFill ? ( -
- ) : i === barsToFill ? ( -
- ) : null} -
- ))} -
-
- -
-
- Avg. Process Time - {materialCycleTime} secs/unit -
-
- Machine Utilization - {machineActiveTime} - {/* {machineActiveTime} */} -
-
- - ) : ( - - )} -
-
+
} + ); };