feat: Introduce document processing indicator UI, update localization.

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/ProcessingIndicator.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Loader2, RefreshCw } from "lucide-react";
+import { motion, AnimatePresence } from "motion/react";
+import { useTranslations } from "next-intl";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+
+interface ProcessingIndicatorProps {
+	activeTasksCount: number;
+}
+
+export function ProcessingIndicator({ activeTasksCount }: ProcessingIndicatorProps) {
+	const t = useTranslations("documents");
+
+	if (activeTasksCount === 0) return null;
+
+	return (
+		<AnimatePresence>
+			<motion.div
+				initial={{ opacity: 0, height: 0, marginBottom: 0 }}
+				animate={{ opacity: 1, height: "auto", marginBottom: 24 }}
+				exit={{ opacity: 0, height: 0, marginBottom: 0 }}
+				transition={{ duration: 0.3 }}
+			>
+				<Alert className="border-primary/20 bg-primary/5">
+					<div className="flex items-center gap-4">
+						<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
+							<Loader2 className="h-5 w-5 animate-spin text-primary" />
+						</div>
+						<div className="flex-1">
+							<AlertTitle className="text-primary font-semibold">
+								{t("processing_documents")}
+							</AlertTitle>
+							<AlertDescription className="text-muted-foreground">
+								{t("active_tasks_count", { count: activeTasksCount })}
+							</AlertDescription>
+						</div>
+					</div>
+				</Alert>
+			</motion.div>
+		</AnimatePresence>
+	);
+}

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx

@@ -6,8 +6,9 @@ import { RefreshCw } from "lucide-react";
 import { motion } from "motion/react";
 import { useParams } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useId, useMemo, useState } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
+import { useLogsSummary } from "@/hooks/use-logs";
 import { Button } from "@/components/ui/button";
 import { deleteDocumentMutationAtom } from "@/atoms/documents/document-mutation.atoms";
 import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
@@ -17,6 +18,7 @@ import { cacheKeys } from "@/lib/query-client/cache-keys";
 import { DocumentsFilters } from "./components/DocumentsFilters";
 import { DocumentsTableShell, type SortKey } from "./components/DocumentsTableShell";
 import { PaginationControls } from "./components/PaginationControls";
+import { ProcessingIndicator } from "./components/ProcessingIndicator";
 import type { ColumnVisibility } from "./components/types";
 
 function useDebounced<T>(value: T, delay = 250) {
@@ -132,6 +134,20 @@ export default function DocumentsTable() {
 		toast.success(t("refresh_success") || "Documents refreshed");
 	}, [debouncedSearch, refetchSearch, refetchDocuments, t]);
 
+	// Set up polling for active tasks
+	const { summary } = useLogsSummary(searchSpaceId, 24, { refetchInterval: 5000 });
+	const activeTasksCount = summary?.active_tasks.length || 0;
+	const prevActiveTasksCount = useRef(activeTasksCount);
+
+	// Auto-refresh when a task finishes
+	useEffect(() => {
+		if (prevActiveTasksCount.current > activeTasksCount) {
+			// A task has finished!
+			refreshCurrentView();
+		}
+		prevActiveTasksCount.current = activeTasksCount;
+	}, [activeTasksCount, refreshCurrentView]);
+
 	// Create a delete function for single document deletion
 	const deleteDocument = useCallback(
 		async (id: number) => {
@@ -210,6 +226,8 @@ export default function DocumentsTable() {
 				</Button>
 			</motion.div>
 
+			<ProcessingIndicator activeTasksCount={activeTasksCount} />
+
 			<DocumentsFilters
 				typeCounts={typeCounts ?? {}}
 				selectedIds={selectedIds}