From 40b402a1c34c41b3e4f5b577c61bd072b7880bd9 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Tue, 30 Jul 2024 14:31:25 +0200
Subject: [PATCH] Update ProjectCreationDialog.jsx

---
 .../ProjectCreationDialog.jsx                 | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/dashboard/src/states/Dashboard/pages/Home/components/ProjectCreationDialog/ProjectCreationDialog.jsx b/dashboard/src/states/Dashboard/pages/Home/components/ProjectCreationDialog/ProjectCreationDialog.jsx
index 3ef4573..2e5e64d 100644
--- a/dashboard/src/states/Dashboard/pages/Home/components/ProjectCreationDialog/ProjectCreationDialog.jsx
+++ b/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" />}}
-                            onKeyUp={onKeyUp} sx={{mt: 1}} />
+                           InputProps={{startAdornment: <DriveFileRenameOutline sx={{mr: 1}} color="text.secondary"/>}}
+                           onKeyUp={loading ? null : onKeyUp} sx={{mt: 1}}/>
             </DialogContent>
             <DialogActions>
-                <Button onClick={onClose}>Cancel</Button>
-                <Button onClick={createProject}>Create</Button>
+                {loading && <Button disabled><AutoMode sx={{mr: 1}} color="text.secondary"/>Creating...</Button>}
+                {!loading && <>
+                    <Button onClick={onClose}>Cancel</Button>
+                    <Button onClick={createProject}>Create</Button>
+                </>}
             </DialogActions>
         </Dialog>
     )