feat: show spinner on export button during export

This commit is contained in:
CREDO23 2026-04-09 14:00:25 +02:00
parent 1af5725bd1
commit 78fa2d926a
2 changed files with 19 additions and 3 deletions

View file

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

View file

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