Add elapsed loading timer to UI during report generation

frontend/src/App.jsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 const ACCEPTED_TYPES = ["video/mp4", "video/quicktime"];
 
@@ -10,8 +10,31 @@ const initialState = {
   error: null
 };
 
+function formatTime(seconds) {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  if (m > 0) return `${m}m ${s}s`;
+  return `${s}s`;
+}
+
 export default function App() {
   const [state, setState] = useState(initialState);
+  const [elapsed, setElapsed] = useState(0);
+  const intervalRef = useRef(null);
+
+  useEffect(() => {
+    if (state.isLoading) {
+      setElapsed(0);
+      intervalRef.current = setInterval(() => {
+        setElapsed((prev) => prev + 1);
+      }, 1000);
+    } else {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    }
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [state.isLoading]);
 
   const filename = useMemo(() => {
     if (!state.file) return "No file selected";
@@ -164,7 +187,7 @@ export default function App() {
                 disabled={!state.file || state.isLoading}
                 onClick={submitFile}
               >
-                {state.isLoading ? "Processing..." : "Generate report"}
+                {state.isLoading ? `Processing... (${formatTime(elapsed)})` : "Generate report"}
               </button>
               {state.error && (
                 <p className="rounded-lg border border-red-400/40 bg-red-500/10 p-3 text-sm text-red-200">