Update optimization animation to use st.empty() loop pattern

- Restructured animation loop to update st.empty() containers within single script execution
- Added status container showing step progress during optimization
- Re-enabled animation mode (ENABLE_ANIMATION = True) for real-time progress tracking
- Improved code organization for animation state management
- Updated comments in objective_progress.py for clarity

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.py

@@ -68,10 +68,8 @@ if 'active_tab' not in st.session_state:
     st.session_state.active_tab = 0  # Default to Optimization tab
 
 # Animation mode - set to False for Hugging Face Spaces (instant results)
-# Set to True for local demos with 10-second animation
-# NOTE: Due to Streamlit's execution model, real-time animation is unreliable
-# Setting to False for instant, reliable results
-ENABLE_ANIMATION = False  # Set to True to attempt 10-second animation (may not work consistently)
+# Set to True for local demos with real-time progress animation
+ENABLE_ANIMATION = True  # Set to False for HF Spaces deployment (instant results)
 
 # Render sidebar and get config
 sidebar_config = render_sidebar()
@@ -323,18 +321,24 @@ with tabs[0]:
 
             st.markdown("---")
 
-        # Create placeholders for real-time animation
-        objective_placeholder = st.empty()
-        divider1 = st.empty()
-        progress_placeholder = st.empty()
-        divider2 = st.empty()
-        trajectory_placeholder = st.empty()
-
-        # Run animation loop for real-time updates
+        # Run optimization animation loop using st.empty() for real-time updates
         if st.session_state.optimization_running:
+            # Create empty containers for progressive updates
+            status_container = st.empty()
+            objective_container = st.empty()
+            divider1_container = st.empty()
+            progress_container = st.empty()
+            divider2_container = st.empty()
+            trajectory_container = st.empty()
+
+            # Animate through all 20 steps
             for step in range(st.session_state.progress_step, 21):
-                # Update objective progress
-                with objective_placeholder.container():
+                # Update status
+                with status_container:
+                    st.info(f"⚙️ **Optimizing...** Step {step}/20 ({int(step/20*100)}%)")
+
+                # Update objective progress charts
+                with objective_container.container():
                     render_objective_progress(
                         budget_hours=sidebar_config['estimated_hours'],
                         is_running=True,
@@ -342,11 +346,11 @@ with tabs[0]:
                         current_step=step
                     )
 
-                with divider1:
+                with divider1_container:
                     st.markdown("---")
 
                 # Update progress chart
-                with progress_placeholder.container():
+                with progress_container.container():
                     render_progress_chart(
                         budget_hours=sidebar_config['estimated_hours'],
                         is_running=True,
@@ -354,57 +358,54 @@ with tabs[0]:
                         current_step=step
                     )
 
-                with divider2:
+                with divider2_container:
                     st.markdown("---")
 
                 # Update search trajectory
-                with trajectory_placeholder.container():
+                with trajectory_container.container():
                     render_search_trajectory(
                         is_running=True,
                         current_step=step
                     )
 
-                # Store current step
+                # Update session state
                 st.session_state.progress_step = step
 
-                # Sleep for animation (this creates the 10-second total duration)
+                # Sleep to create animation effect (allows browser to render)
                 if ENABLE_ANIMATION and step < 20:
                     time.sleep(0.5)
 
-            # Mark as complete after loop
+            # Mark as complete
             st.session_state.progress_step = 20
             st.session_state.optimization_running = False
             st.session_state.optimization_completed = True
+
+            # Clear status and show completion
+            status_container.success("🎉 **Optimization Complete!**")
+            time.sleep(1)
             st.rerun()
-        else:
-            # Show final state when completed
-            with objective_placeholder.container():
-                if st.session_state.optimization_completed:
-                    render_objective_progress(
-                        budget_hours=sidebar_config['estimated_hours'],
-                        is_running=False,
-                        selected_objectives=sidebar_config['objectives']
-                    )
 
-            with divider1:
-                if st.session_state.optimization_completed:
-                    st.markdown("---")
+        elif st.session_state.optimization_completed:
+            # Show final results
+            render_objective_progress(
+                budget_hours=sidebar_config['estimated_hours'],
+                is_running=False,
+                selected_objectives=sidebar_config['objectives']
+            )
 
-            with progress_placeholder.container():
-                if st.session_state.optimization_completed:
-                    render_progress_chart(
-                        budget_hours=sidebar_config['estimated_hours'],
-                        is_running=False,
-                        enable_animation=ENABLE_ANIMATION
-                    )
+            st.markdown("---")
 
-            with divider2:
-                if st.session_state.optimization_completed:
-                    st.markdown("---")
+            render_progress_chart(
+                budget_hours=sidebar_config['estimated_hours'],
+                is_running=False,
+                enable_animation=ENABLE_ANIMATION
+            )
+
+            st.markdown("---")
 
-            with trajectory_placeholder.container():
-                if st.session_state.optimization_completed:
-                    render_search_trajectory(is_running=False)
+            render_search_trajectory(
+                is_running=False
+            )
 
 # Results Tab
 with tabs[1]:

components/objective_progress.py

@@ -14,12 +14,12 @@ def render_objective_progress(budget_hours=2, is_running=False, selected_objecti
     df = generate_all_objectives_progress(budget_hours)
     total_rows = len(df)
 
-    # If optimization is "running", only show partial data
+    # If optimization is "running", only show partial data based on current progress
     if is_running:
         # Use provided current_step or get from session state
         if current_step is None:
             current_step = st.session_state.get('progress_step', 1)
-        # Always show at least 1 row so charts are visible from the start
+        # Show data up to current step (1-20)
         display_rows = max(1, min(current_step, total_rows))
         df = df.iloc[:display_rows]