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

app/src/components/ui/analysis/ProductionCapacity.tsx

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

app/src/components/ui/analysis/ROISummary.tsx

@@ -84,15 +84,22 @@ 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 (
-    <div className="roiSummary-container analysis-card">
+    <>
+      {!isLoading && <div className="roiSummary-container analysis-card">
         <div className="roiSummary-wrapper analysis-card-wrapper">
           <div className="card-header">
             <div className="header">
@@ -238,7 +245,8 @@ const ROISummary = ({
             // <div> No Data</div>
           )}
         </div>
-    </div>
+      </div>}
+    </>
   );
 };
 

app/src/components/ui/analysis/ThroughputSummary.tsx

@@ -30,18 +30,18 @@ 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 (
-    <div className="throughtputSummary-container analysis-card">
+    <>
+      {!isLoading && <div className="throughtputSummary-container analysis-card">
         <div className="throughtputSummary-wrapper analysis-card-wrapper">
           <div className="card-header">
             <div className="header">
@@ -54,7 +54,7 @@ const ProductionCapacity = ({
               <ThroughputSummaryIcon />
             </div>
           </div>
-        {isLoading ? (
+          {!isLoading ? (
             <>
               <div className="process-container">
                 <div className="throughput-value">
@@ -95,7 +95,8 @@ const ProductionCapacity = ({
             <SkeletonUI type={"default"} />
           )}
         </div>
-    </div>
+      </div>}
+    </>
   );
 };