Update app.py

app.py

@@ -221,7 +221,11 @@ def get_card_details(card_id: str, mcc: str = None) -> dict:
     }
 
 def get_recommendation_with_agent(user_id, merchant, category, amount):
-    yield "⏳ **Agent is thinking...** Analyzing your transaction and cards...", None
+    yield """
+    <div class="thinking-dots">
+        🤖 AI Agent is thinking
+    </div>
+    """, None
     
     try:
         transaction = {
@@ -235,12 +239,24 @@ def get_recommendation_with_agent(user_id, merchant, category, amount):
         print("=" * 80)
         print(f"🚀 REQUEST: {config.ORCHESTRATOR_URL}/recommend")
         print(f"PAYLOAD: {json.dumps(transaction, indent=2)}")
+
+        yield """
+        <div class="thinking-dots">
+            🔍 Analyzing your wallet
+        </div>
+        """, None
         
         response = httpx.post(
             f"{config.ORCHESTRATOR_URL}/recommend",
             json=transaction,
             timeout=60.0
         )
+
+        yield """
+        <div class="thinking-dots">
+            💳 Comparing cards
+        </div>
+        """, None
         
         print(f"📥 STATUS: {response.status_code}")
         print(f"📦 RESPONSE: {response.text[:2000]}")
@@ -1272,7 +1288,88 @@ with gr.Blocks(
         margin: 5px 0;
         font-size: 14px;
     }
+    .thinking-dots {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 20px;
+        font-size: 18px;
+        color: #667eea;
+        font-weight: 500;
+    }
+    
+    .thinking-dots::after {
+        content: '●●●';
+        display: inline-block;
+        letter-spacing: 4px;
+        animation: thinking 1.4s infinite;
+        color: #667eea;
+    }
+    
+    @keyframes thinking {
+        0%, 20% {
+            content: '●○○';
+        }
+        40% {
+            content: '●●○';
+        }
+        60%, 100% {
+            content: '●●●';
+        }
+    }
+    
+    /* Alternative bouncing dots animation */
+    .thinking-bounce {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+    }
+    
+    .thinking-bounce span {
+        width: 10px;
+        height: 10px;
+        background: #667eea;
+        border-radius: 50%;
+        animation: bounce 1.4s infinite ease-in-out;
+    }
     
+    .thinking-bounce span:nth-child(1) {
+        animation-delay: 0s;
+    }
+    
+    .thinking-bounce span:nth-child(2) {
+        animation-delay: 0.2s;
+    }
+    
+    .thinking-bounce span:nth-child(3) {
+        animation-delay: 0.4s;
+    }
+    
+    @keyframes bounce {
+        0%, 80%, 100% {
+            transform: translateY(0);
+            opacity: 0.5;
+        }
+        40% {
+            transform: translateY(-10px);
+            opacity: 1;
+        }
+    }
+    
+    /* Pulsing effect */
+    .thinking-pulse {
+        display: inline-block;
+        animation: pulse 1.5s ease-in-out infinite;
+    }
+    
+    @keyframes pulse {
+        0%, 100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.3;
+        }
+    }
     /* ===== FORECAST TAB - PREDICTION BOX ===== */
     .forecast-prediction {
         background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
@@ -1700,7 +1797,6 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
                 ]
             )
         
-        # ==================== TAB 4: FORECAST ====================
         # ==================== TAB 4: FORECAST ====================
         with gr.Tab("📈 Forecast"):
             # Add clear header with explanation