Update frontend/src/components/ocr/ExtractionOutput.jsx

frontend/src/components/ocr/ExtractionOutput.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import {
   Code2,
@@ -317,12 +317,48 @@ function fieldsToText(fields) {
 export default function ExtractionOutput({ hasFile, isProcessing, isComplete, extractionResult }) {
   const [activeTab, setActiveTab] = useState("json");
   const [copied, setCopied] = useState(false);
+  const [statusMessage, setStatusMessage] = useState("Preparing document...");
   
   // Get fields from extraction result, default to empty object
   const fields = extractionResult?.fields || {};
   const confidence = extractionResult?.confidence || 0;
   const fieldsExtracted = extractionResult?.fieldsExtracted || 0;
   const totalTime = extractionResult?.totalTime || 0;
+
+  // Dynamic status messages that rotate during processing
+  const statusMessages = [
+    "Preparing document...",
+    "Converting pages to images...",
+    "Sending to AI model...",
+    "Reading text from document...",
+    "Identifying document structure...",
+    "Extracting tables and data...",
+    "Analyzing content...",
+    "Processing pages...",
+    "Organizing extracted information...",
+    "Finalizing results...",
+  ];
+
+  // Rotate status messages during processing
+  const messageIndexRef = useRef(0);
+  
+  useEffect(() => {
+    if (!isProcessing) {
+      setStatusMessage("Analyzing document structure");
+      messageIndexRef.current = 0;
+      return;
+    }
+
+    setStatusMessage(statusMessages[0]);
+    messageIndexRef.current = 0;
+
+    const interval = setInterval(() => {
+      messageIndexRef.current = (messageIndexRef.current + 1) % statusMessages.length;
+      setStatusMessage(statusMessages[messageIndexRef.current]);
+    }, 2500); // Change message every 2.5 seconds
+
+    return () => clearInterval(interval);
+  }, [isProcessing]);
   
   // Initialize expanded sections based on available fields
   const [expandedSections, setExpandedSections] = useState(() => 
@@ -523,7 +559,7 @@ export default function ExtractionOutput({ hasFile, isProcessing, isComplete, ex
                 <Sparkles className="h-8 w-8 text-indigo-500" />
               </motion.div>
               <p className="text-slate-700 font-medium mb-1">Extracting data...</p>
-              <p className="text-slate-400 text-sm">Analyzing document structure</p>
+              <p className="text-slate-400 text-sm">{statusMessage}</p>
 
               <div className="mt-6 flex items-center justify-center gap-1">
                 {[0, 1, 2].map((i) => (