Update ProgressModal.tsx

frontend/src/components/common/ProgressModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useMemo } from 'react';
 import { Modal } from '../ui/modal';
 import Button from '../ui/button/Button';
 
@@ -196,15 +196,27 @@ export default function ProgressModal({
   const [visuallyCompletedSteps, setVisuallyCompletedSteps] = React.useState<Set<string>>(new Set());
   const stepCompletionTimersRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
   const visuallyCompletedStepsRef = useRef<Set<string>>(new Set());
+  const lastProcessedStepLogsHashRef = useRef<string>('');
+  const lastProcessedPhaseRef = useRef<string>('');
   
   // Sync ref with state
   useEffect(() => {
     visuallyCompletedStepsRef.current = visuallyCompletedSteps;
   }, [visuallyCompletedSteps]);
   
-  // Get steps for this function
+  // Memoize steps to prevent unnecessary re-renders
-  const steps = getStepsForFunction(functionId, title);
+  const steps = useMemo(() => getStepsForFunction(functionId, title), [functionId, title]);
-  const currentPhase = getCurrentPhase(stepLogs, percentage);
+  
+  // Memoize currentPhase to prevent unnecessary re-renders
+  const currentPhase = useMemo(() => getCurrentPhase(stepLogs, percentage), [stepLogs, percentage]);
+  
+  // Create a stable hash of stepLogs to detect meaningful changes
+  const stepLogsHash = useMemo(() => {
+    return JSON.stringify(stepLogs.map(log => ({
+      stepName: log.stepName,
+      status: log.status,
+    })));
+  }, [stepLogs]);
   
   // Format step message with counts and better formatting
   const formatStepMessage = (stepPhase: string, stepLog: any, defaultLabel: string, allStepLogs: any[], functionId?: string, title?: string): string => {
@@ -285,7 +297,8 @@ export default function ProgressModal({
   };
 
   // Build checklist items with visual completion state (needed for allStepsVisuallyCompleted)
-  const checklistItems = steps.map((step) => {
+  const checklistItems = useMemo(() => {
+    return steps.map((step) => {
       const actuallyCompleted = isStepCompleted(step.phase, currentPhase, stepLogs);
       const visuallyCompleted = visuallyCompletedSteps.has(step.phase);
       // Only show as in progress if it's the current phase AND not visually completed yet
@@ -302,6 +315,7 @@ export default function ProgressModal({
         inProgress,
       };
     });
+  }, [steps, currentPhase, stepLogs, visuallyCompletedSteps, functionId, title]);
 
   // Check if all steps are visually completed
   const allStepsVisuallyCompleted = steps.length > 0 && 
@@ -313,11 +327,22 @@ export default function ProgressModal({
       // Reset when modal closes
       setVisuallyCompletedSteps(new Set());
       visuallyCompletedStepsRef.current = new Set();
+      lastProcessedStepLogsHashRef.current = '';
+      lastProcessedPhaseRef.current = '';
       stepCompletionTimersRef.current.forEach(timer => clearTimeout(timer));
       stepCompletionTimersRef.current.clear();
       return;
     }
     
+    // Only process if stepLogs or currentPhase actually changed in a meaningful way
+    if (stepLogsHash === lastProcessedStepLogsHashRef.current && currentPhase === lastProcessedPhaseRef.current) {
+      return;
+    }
+    
+    // Update last processed values
+    lastProcessedStepLogsHashRef.current = stepLogsHash;
+    lastProcessedPhaseRef.current = currentPhase;
+    
     const phaseOrder = ['INIT', 'PREP', 'AI_CALL', 'PARSE', 'SAVE', 'DONE'];
     
     // Check each step in order
@@ -360,7 +385,7 @@ export default function ProgressModal({
       stepCompletionTimersRef.current.forEach(timer => clearTimeout(timer));
       stepCompletionTimersRef.current.clear();
     };
-  }, [isOpen, currentPhase, stepLogs, steps]); // Removed visuallyCompletedSteps from dependencies
+  }, [isOpen, currentPhase, stepLogsHash, steps]); // Use stepLogsHash instead of stepLogs
   
   // Don't auto-close - user must click close button