Merge pull request #24 from visual-heuristics/feat_addLoading

add loading

Author: invincibleyolk

src/pages/PageOne/dropAndFetch.jsx

@@ -3,6 +3,7 @@ import DropZone from "./dropZone";
 import Button from "@material-ui/core/Button";
 import Container from "@material-ui/core/Container";
 import CloudUploadIcon from "@material-ui/icons/CloudUpload";
+import CircularProgress from '@material-ui/core/CircularProgress';
 import css from "./index.module.less";
 
 /**
@@ -14,6 +15,7 @@ import css from "./index.module.less";
  */
 export default function DropAndFetch({ onStore, onClick, newURL }) {
   const [dataFiles, setDataFiles] = useState({});
+  const [loading, setLoading] = useState(false);
 
   const dragsAndDrops = [
     { name: "Domain", fileType: ".pddl", desc: "or predictes and actions." },
@@ -41,6 +43,7 @@ export default function DropAndFetch({ onStore, onClick, newURL }) {
       formData.append(name, files[name]);
     }
     try {
+      setLoading(true)
       const resp = await fetch(
         "https://planimation.planning.domains/upload/pddl",
         {
@@ -55,6 +58,8 @@ export default function DropAndFetch({ onStore, onClick, newURL }) {
       onStore(txt);
     } catch (error) {
       alert(error);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -92,6 +97,7 @@ export default function DropAndFetch({ onStore, onClick, newURL }) {
               onFileLoad={handleFileLoad}
             />
           ))}
+          {loading && <div className={css.loadingBox}/>}
         </Container>
         <Container maxWidth="sm" component="main">
           <div className={css.buttonBox}>
@@ -102,14 +108,18 @@ export default function DropAndFetch({ onStore, onClick, newURL }) {
             >
               Cancel
             </Button>
+            <div className={css.wrapper}>
             <Button
               variant="contained"
               color="primary"
               startIcon={<CloudUploadIcon />}
               onClick={handleSubmit}
+              disabled={loading}
             >
               Upload Files
             </Button>
+            {loading && <CircularProgress size={24} className={css.loading}/>}
+            </div>
           </div>
         </Container>
       </div>

src/pages/PageOne/index.module.less

@@ -20,4 +20,23 @@ background: #fff;
 */
   display: flex;
   justify-content: space-around;
+  position: relative;
+
+}
+.wrapper {
+  position: relative;
+
+}
+.loading {
+  position: absolute;
+  top: 5px;
+  left: 71px;
+}
+.loadingBox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
 }