Update ProjectCreationDialog.jsx

dashboard/src/states/Dashboard/pages/Home/components/ProjectCreationDialog/ProjectCreationDialog.jsx

@@ -10,23 +10,28 @@ import {
 import {putRequest} from "@/common/utils/RequestUtil.js";
 import {useContext, useEffect, useState} from "react";
 import {ProjectContext} from "@/states/Dashboard/contexts/Project";
-import {DriveFileRenameOutline} from "@mui/icons-material";
+import {AutoMode, DriveFileRenameOutline} from "@mui/icons-material";
 
 export const ProjectCreationDialog = ({open, onClose}) => {
 
     const {updateProjects} = useContext(ProjectContext);
 
+    const [loading, setLoading] = useState(false);
+
     const [name, setName] = useState("");
     const [creationError, setCreationError] = useState(null);
 
     const createProject = () => {
         if (name.length === 0) return setCreationError("Name cannot be empty.");
+        setLoading(true);
 
         putRequest("/project", {name}).then(() => {
+            setLoading(false);
             updateProjects();
             onClose();
         }).catch((e) => {
             setCreationError(e.message);
+            setLoading(false);
         });
     }
 
@@ -47,14 +52,18 @@ export const ProjectCreationDialog = ({open, onClose}) => {
             <DialogTitle>Create a new project</DialogTitle>
             <DialogContent sx={{maxWidth: 300}}>
                 {creationError && <Alert severity="error" sx={{mb: 2}}>{creationError}</Alert>}
-                <TextField label="Name" variant="outlined" fullWidth value={name} onChange={(e) => setName(e.target.value)}
+                <TextField label="Name" variant="outlined" fullWidth value={name}
+                           onChange={(e) => setName(e.target.value)}
                            placeholder="Name"
-                           InputProps={{startAdornment: <DriveFileRenameOutline sx={{mr: 1}} color="text.secondary" />}}
+                           InputProps={{startAdornment: <DriveFileRenameOutline sx={{mr: 1}} color="text.secondary"/>}}
-                            onKeyUp={onKeyUp} sx={{mt: 1}} />
+                           onKeyUp={loading ? null : onKeyUp} sx={{mt: 1}}/>
             </DialogContent>
             <DialogActions>
-                <Button onClick={onClose}>Cancel</Button>
+                {loading && <Button disabled><AutoMode sx={{mr: 1}} color="text.secondary"/>Creating...</Button>}
-                <Button onClick={createProject}>Create</Button>
+                {!loading && <>
+                    <Button onClick={onClose}>Cancel</Button>
+                    <Button onClick={createProject}>Create</Button>
+                </>}
             </DialogActions>
         </Dialog>
     )