Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add loading state with timeout for ThroughputSummary and ROISummary components

This commit is contained in:
Gomathi 2025-06-09 18:10:37 +05:30
parent 3d9f625e3d
commit db8536100c
3 changed files with 194 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/src/components/ui/analysis/ProductionCapacity.tsx
View File

@ -91,8 +91,11 @@ const ThroughputSummary: React.FC = () => {
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
useEffect(() => { useEffect(() => {
if (productionCapacityData >= 0) { if (productionCapacityData >0) {
setTimeout(() => {
setIsLoading(false); setIsLoading(false);
}, 3000);
console.log("productionCapacityData: ", productionCapacityData); console.log("productionCapacityData: ", productionCapacityData);
} else { } else {
setIsLoading(true); setIsLoading(true);
@ -100,7 +103,8 @@ const ThroughputSummary: React.FC = () => {
}, [productionCapacityData]); }, [productionCapacityData]);
return ( return (
<div className="production analysis-card"> <>
{!isLoading && <div className="production analysis-card">
<div className="production-wrapper analysis-card-wrapper"> <div className="production-wrapper analysis-card-wrapper">
<div className="card-header"> <div className="card-header">
<div className="header"> <div className="header">
@ -184,7 +188,8 @@ const ThroughputSummary: React.FC = () => {
<SkeletonUI type={"default"} /> <SkeletonUI type={"default"} />
)} )}
</div> </div>
</div> </div>}
</>
); );
}; };

18
app/src/components/ui/analysis/ROISummary.tsx
View File

@ -84,15 +84,22 @@ const ROISummary = ({
const { roiSummary } = useROISummaryData(); const { roiSummary } = useROISummaryData();
useEffect(() => { useEffect(() => {
if (roiSummary && typeof roiSummary === "object") { if (roiSummary.productName) {
setIsLoading(false); // Data loaded // If productName is set, assume data is loaded
setTimeout(() => {
setIsLoading(false);
}, 3000);
// setIsLoading(false);
} else { } else {
setIsLoading(true); // Show skeleton while loading // If productName is empty, assume still loading
setIsLoading(true);
} }
}, [roiSummary]); }, [roiSummary]);
return ( return (
<div className="roiSummary-container analysis-card"> <>
{!isLoading && <div className="roiSummary-container analysis-card">
<div className="roiSummary-wrapper analysis-card-wrapper"> <div className="roiSummary-wrapper analysis-card-wrapper">
<div className="card-header"> <div className="card-header">
<div className="header"> <div className="header">
@ -238,7 +245,8 @@ const ROISummary = ({
// <div> No Data</div> // <div> No Data</div>
)} )}
</div> </div>
</div> </div>}
</>
); );
}; };

17
app/src/components/ui/analysis/ThroughputSummary.tsx
View File

@ -30,18 +30,18 @@ const ProductionCapacity = ({
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
useEffect(() => { useEffect(() => {
if (throughputData >= 0) { console.log('throughputData: ', throughputData > 0);
// console.log('machineActiveTime: ', machineActiveTime); if (throughputData > 0) {
// console.log('materialCycleTime: ', materialCycleTime); setIsLoading(false);
// console.log('throughputData: ', throughputData); } else {
// console.log('productionCapacityData: ', productionCapacityData);
setIsLoading(true); setIsLoading(true);
} }
}, [throughputData]) }, [throughputData])
return ( return (
<div className="throughtputSummary-container analysis-card"> <>
{!isLoading && <div className="throughtputSummary-container analysis-card">
<div className="throughtputSummary-wrapper analysis-card-wrapper"> <div className="throughtputSummary-wrapper analysis-card-wrapper">
<div className="card-header"> <div className="card-header">
<div className="header"> <div className="header">
@ -54,7 +54,7 @@ const ProductionCapacity = ({
<ThroughputSummaryIcon /> <ThroughputSummaryIcon />
</div> </div>
</div> </div>
{isLoading ? ( {!isLoading ? (
<> <>
<div className="process-container"> <div className="process-container">
<div className="throughput-value"> <div className="throughput-value">
@ -95,7 +95,8 @@ const ProductionCapacity = ({
<SkeletonUI type={"default"} /> <SkeletonUI type={"default"} />
)} )}
</div> </div>
</div> </div>}
</>
); );
}; };