feat: show spinner on export button during export

surfsense_web/components/documents/DocumentsFilters.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Download, FolderPlus, ListFilter, Search, Upload, X } from "lucide-react";
+import { Download, FolderPlus, ListFilter, Loader2, Search, Upload, X } from "lucide-react";
 import { useTranslations } from "next-intl";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { useDocumentUploadDialog } from "@/components/assistant-ui/document-upload-popup";
@@ -21,6 +21,7 @@ export function DocumentsFilters({
 	activeTypes,
 	onCreateFolder,
 	onExportKB,
+	isExporting,
 }: {
 	typeCounts: Partial<Record<DocumentTypeEnum, number>>;
 	onSearch: (v: string) => void;
@@ -29,6 +30,7 @@ export function DocumentsFilters({
 	activeTypes: DocumentTypeEnum[];
 	onCreateFolder?: () => void;
 	onExportKB?: () => void;
+	isExporting?: boolean;
 }) {
 	const t = useTranslations("documents");
 	const id = React.useId();
@@ -91,16 +93,23 @@ export function DocumentsFilters({
 							<TooltipTrigger asChild>
 								<ToggleGroupItem
 									value="export"
+									disabled={isExporting}
 									className="h-9 w-9 shrink-0 border-sidebar-border text-sidebar-foreground/60 hover:text-sidebar-foreground hover:border-sidebar-border bg-sidebar"
 									onClick={(e) => {
 										e.preventDefault();
 										onExportKB();
 									}}
 								>
-									<Download size={14} />
+									{isExporting ? (
+										<Loader2 size={14} className="animate-spin" />
+									) : (
+										<Download size={14} />
+									)}
 								</ToggleGroupItem>
 							</TooltipTrigger>
-							<TooltipContent>Export knowledge base</TooltipContent>
+							<TooltipContent>
+								{isExporting ? "Exporting…" : "Export knowledge base"}
+							</TooltipContent>
 						</Tooltip>
 					)}
 

surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx

@@ -484,6 +484,7 @@ export function DocumentsSidebar({
 				setIsExportingKB(false);
 			}
 		} else if (ctx.type === "folder" && ctx.folder) {
+			setIsExportingKB(true);
 			try {
 				const safeName =
 					ctx.folder.name
@@ -498,6 +499,8 @@ export function DocumentsSidebar({
 			} catch (err) {
 				console.error("Folder export failed:", err);
 				toast.error(err instanceof Error ? err.message : "Export failed");
+			} finally {
+				setIsExportingKB(false);
 			}
 		}
 		setExportWarningContext(null);
@@ -535,6 +538,7 @@ export function DocumentsSidebar({
 				return;
 			}
 
+			setIsExportingKB(true);
 			try {
 				const safeName =
 					folder.name
@@ -549,6 +553,8 @@ export function DocumentsSidebar({
 			} catch (err) {
 				console.error("Folder export failed:", err);
 				toast.error(err instanceof Error ? err.message : "Export failed");
+			} finally {
+				setIsExportingKB(false);
 			}
 		},
 		[searchSpaceId, getPendingCountInSubtree, doExport]
@@ -949,6 +955,7 @@ export function DocumentsSidebar({
 						activeTypes={activeTypes}
 						onCreateFolder={() => handleCreateFolder(null)}
 						onExportKB={handleExportKB}
+						isExporting={isExportingKB}
 					/>
 				</div>