apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-25 00:36:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: enhance button loading states and styling in editor and sidebar components

Browse source
This commit is contained in:
Anish Sarkar 2026-04-22 23:06:49 +05:30
parent 6ac5256431
commit 336bd57c4d
4 changed files with 31 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

16
surfsense_web/components/editor-panel/editor-panel.tsx
View file

@ -1,7 +1,7 @@
"use client";
import { useAtomValue, useSetAtom } from "jotai";
import { Download, FileQuestionMark, FileText, Loader2, RefreshCw, XIcon } from "lucide-react";
import { Download, FileQuestionMark, FileText, RefreshCw, XIcon } from "lucide-react";
import dynamic from "next/dynamic";
import { useCallback, useEffect, useRef, useState } from "react";
import { toast } from "sonner";
@ -11,6 +11,7 @@ import { MarkdownViewer } from "@/components/markdown-viewer";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
import { Spinner } from "@/components/ui/spinner";
import { useMediaQuery } from "@/hooks/use-media-query";
import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
@ -247,7 +248,7 @@ export function EditorPanelContent({
<Button
variant="outline"
size="sm"
className="shrink-0 gap-1.5"
className="relative shrink-0"
disabled={downloading}
onClick={async () => {
setDownloading(true);
@ -276,12 +277,13 @@ export function EditorPanelContent({
}
}}
>
{downloading ? (
<Loader2 className="size-3.5 animate-spin" />
) : (
<span
className={`flex items-center gap-1.5 ${downloading ? "opacity-0" : ""}`}
>
<Download className="size-3.5" />
)}
{downloading ? "Preparing..." : "Download .md"}
Download .md
</span>
{downloading && <Spinner size="sm" className="absolute" />}
</Button>
</AlertDescription>
</Alert>

9
surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
View file

@ -1541,10 +1541,13 @@ function AnonymousDocumentsSidebar({
type="button"
onClick={handleAnonUploadClick}
disabled={isUploading}
className="flex w-full items-center justify-center gap-2 rounded-lg border-2 border-dashed border-primary/30 px-4 py-6 text-sm text-primary transition-colors hover:border-primary/60 hover:bg-primary/5 cursor-pointer disabled:opacity-50 disabled:pointer-events-none"
className="relative flex w-full items-center justify-center rounded-lg border-2 border-dashed border-primary/30 px-4 py-6 text-sm text-primary transition-colors hover:border-primary/60 hover:bg-primary/5 cursor-pointer disabled:opacity-50 disabled:pointer-events-none"
>
<Upload className="size-4" />
{isUploading ? "Uploading..." : "Upload a document"}
<span className={`flex items-center gap-2 ${isUploading ? "opacity-0" : ""}`}>
<Upload className="size-4" />
Upload a document
</span>
{isUploading && <Spinner size="sm" className="absolute" />}
</button>
<p className="mt-2 text-[11px] text-muted-foreground leading-relaxed">
Text, code, CSV, and HTML files only. Create an account for PDFs, images, and 30+

16
surfsense_web/components/layout/ui/tabs/DocumentTabContent.tsx
View file

@ -1,6 +1,6 @@
"use client";
import { Download, FileQuestionMark, FileText, Loader2, PenLine, RefreshCw } from "lucide-react";
import { Download, FileQuestionMark, FileText, PenLine, RefreshCw } from "lucide-react";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useRef, useState } from "react";
import { toast } from "sonner";
@ -8,6 +8,7 @@ import { PlateEditor } from "@/components/editor/plate-editor";
import { MarkdownViewer } from "@/components/markdown-viewer";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
const LARGE_DOCUMENT_THRESHOLD = 2 * 1024 * 1024; // 2MB
@ -278,7 +279,7 @@ export function DocumentTabContent({ documentId, searchSpaceId, title }: Documen
<Button
variant="outline"
size="sm"
className="shrink-0 gap-1.5"
className="relative shrink-0"
disabled={downloading}
onClick={async () => {
setDownloading(true);
@ -307,12 +308,13 @@ export function DocumentTabContent({ documentId, searchSpaceId, title }: Documen
}
}}
>
{downloading ? (
<Loader2 className="size-3.5 animate-spin" />
) : (
<span
className={`flex items-center gap-1.5 ${downloading ? "opacity-0" : ""}`}
>
<Download className="size-3.5" />
)}
{downloading ? "Preparing..." : "Download .md"}
Download .md
</span>
{downloading && <Spinner size="sm" className="absolute" />}
</Button>
</AlertDescription>
</Alert>

20
surfsense_web/components/sources/DocumentUploadTab.tsx
View file

@ -763,22 +763,16 @@ export function DocumentUploadTab({
</div>
<Button
className="w-full"
className="w-full relative"
onClick={handleUpload}
disabled={isAnyUploading || fileCount === 0}
>
{isAnyUploading ? (
<span className="flex items-center gap-2">
<Spinner size="sm" />
{t("uploading")}
</span>
) : (
<span className="flex items-center gap-2">
{folderUpload
? t("upload_folder_button", { count: fileCount })
: t("upload_button", { count: fileCount })}
</span>
)}
<span className={isAnyUploading ? "opacity-0" : ""}>
{folderUpload
? t("upload_folder_button", { count: fileCount })
: t("upload_button", { count: fileCount })}
</span>
{isAnyUploading && <Spinner size="sm" className="absolute" />}
</Button>
</div>
)}