Merge pull request #920 from Hexastack/153-request---add-loading-state-for-document-upload-in-attachmentuploader-component
Some checks are pending
Build and Push Docker API Image / build-and-push (push) Waiting to run
Build and Push Docker Base Image / build-and-push (push) Waiting to run
Build and Push Docker UI Image / build-and-push (push) Waiting to run

feat: add loading spinner for document upload
This commit is contained in:
Yassine 2025-04-12 12:35:35 +01:00 committed by GitHub
commit dadb263176
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -8,7 +8,15 @@
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import FolderCopyIcon from "@mui/icons-material/FolderCopy";
import { Box, Button, Divider, Grid, styled, Typography } from "@mui/material";
import {
Box,
Button,
CircularProgress,
Divider,
Grid,
styled,
Typography,
} from "@mui/material";
import { ChangeEvent, DragEvent, FC, useState } from "react";
import { useUpload } from "@/hooks/crud/useUpload";
@ -84,17 +92,20 @@ const AttachmentUploader: FC<FileUploadProps> = ({
const dialogs = useDialogs();
const [isDragOver, setIsDragOver] = useState<boolean>(false);
const { toast } = useToast();
const { mutate: uploadAttachment } = useUpload(EntityType.ATTACHMENT, {
onError: () => {
toast.error(t("message.upload_failed"));
const { mutate: uploadAttachment, isLoading } = useUpload(
EntityType.ATTACHMENT,
{
onError: () => {
toast.error(t("message.upload_failed"));
},
onSuccess: (data) => {
toast.success(t("message.success_save"));
setAttachment(data);
onChange?.(data);
onUploadComplete?.();
},
},
onSuccess: (data) => {
toast.success(t("message.success_save"));
setAttachment(data);
onChange && onChange(data);
onUploadComplete && onUploadComplete();
},
});
);
const stopDefaults = (e: DragEvent) => {
e.stopPropagation();
e.preventDefault();
@ -167,7 +178,9 @@ const AttachmentUploader: FC<FileUploadProps> = ({
alignItems="center"
sx={{ padding: "20px" }}
>
{attachment ? (
{isLoading ? (
<CircularProgress />
) : attachment ? (
<AttachmentThumbnail
id={attachment.id}
format="full"