Merge branch 'issue/35-Loading' into 'development'

Issue #35: Loading is now a progress gif

See merge request !48

src/components/fieldsAnswerForm/FormFieldSubform.js

 import React, { useState, useEffect } from "react";
-import { useParams } from "react-router-dom";
 import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
-import Button from "@material-ui/core/Button";
 import api from "../../api";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 import FormFieldText from "./FormFieldText";
 import FormFieldSelect from "./FormFieldSelect";
@@ -18,6 +17,9 @@ const useStyles = makeStyles(theme => ({
     top: theme.spacing(10),
     left: "90%",
     padding: theme.spacing(1)
+  },
+  progress: {
+    marginTop: "5%"
   }
 }));
 
@@ -111,7 +113,9 @@ function FormFieldSubform(props) {
           })}
         </div>
       ) : (
-        <p>Loading...</p>
+        <Grid container justify="center" className={classes.progress}>
+          <CircularProgress />
+        </Grid>
       )}
     </Grid>
   );

src/components/fieldsGetForm/JornalFolder/FormFieldSubform.js

@@ -2,9 +2,8 @@ import React, { useState, useEffect } from "react";
 import { useParams, useHistory } from "react-router-dom";
 import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
-import Button from "@material-ui/core/Button";
 import api from "../../../api";
-
+import CircularProgress from "@material-ui/core/CircularProgress";
 import FormFieldText from "./FormFieldText";
 import FormFieldSelect from "./FormFieldSelect";
 import FormFieldRadio from "./FormFieldRadio";
@@ -18,6 +17,9 @@ const useStyles = makeStyles(theme => ({
     top: theme.spacing(10),
     left: "90%",
     padding: theme.spacing(1)
+  },
+  progress: {
+    marginTop: "5%"
   }
 }));
 
@@ -121,7 +123,9 @@ function FormFieldSubform(props) {
             })}
           </div>
         ) : (
-          <p>Loading...</p>
+          <Grid container justify="center" className={classes.progress}>
+            <CircularProgress />
+          </Grid>
         )}
       </Grid>
     </div>

src/components/fieldsGetForm/SummaryFolder/FormFieldSubform.js

@@ -3,6 +3,7 @@ import { useParams, useHistory } from "react-router-dom";
 import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import api from "../../../api";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 import FormFieldText from "./FormFieldText";
 import FormFieldSelect from "./FormFieldSelect";
@@ -17,6 +18,9 @@ const useStyles = makeStyles(theme => ({
     top: theme.spacing(10),
     left: "90%",
     padding: theme.spacing(1)
+  },
+  progress: {
+    marginTop: "5%"
   }
 }));
 
@@ -124,7 +128,9 @@ function FormFieldSubform(props) {
             })}
           </div>
         ) : (
-          <p>Loading...</p>
+          <Grid container justify="center" className={classes.progress}>
+            <CircularProgress />
+          </Grid>
         )}
       </Grid>
     </>

src/components/fieldsVisualizeForm/FormFieldSubform.js

 import React, { useState, useEffect } from "react";
 import { useParams, useHistory } from "react-router-dom";
 import { makeStyles } from "@material-ui/core/styles";
-import Grid from "@material-ui/core/Grid";
-import Button from "@material-ui/core/Button";
 import api from "../../api";
+import Grid from "@material-ui/core/Grid";
 
 import FormFieldText from "./FormFieldText";
 import FormFieldSelect from "./FormFieldSelect";
 import FormFieldRadio from "./FormFieldRadio";
 import FormFieldCheckbox from "./FormFieldCheckbox";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 const useStyles = makeStyles(theme => ({
   menu: {
@@ -18,6 +18,9 @@ const useStyles = makeStyles(theme => ({
     top: theme.spacing(10),
     left: "90%",
     padding: theme.spacing(1)
+  },
+  progress: {
+    marginTop: "5%"
   }
 }));
 
@@ -105,7 +108,9 @@ function FormFieldSubform(props) {
             );
         })
       ) : (
-        <p>Loading...</p>
+        <Grid container justify="center" className={classes.progress}>
+          <CircularProgress />
+        </Grid>
       )}
     </>
   );

src/pages/AnswerForm.js

@@ -5,6 +5,7 @@ import Grid from "@material-ui/core/Grid";
 import api from "../api";
 import Button from "@material-ui/core/Button";
 import { useHistory } from "react-router-dom";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 import FormFieldText from "../components/fieldsAnswerForm/FormFieldText";
 import FormFieldSelect from "../components/fieldsAnswerForm/FormFieldSelect";
@@ -22,6 +23,9 @@ const useStyles = makeStyles(theme => ({
     left: "90%",
     padding: theme.spacing(1)
   },
+  progress: {
+    marginTop: "5%"
+  },
   button: {
     type: "submit",
     width: "100%",
@@ -300,7 +304,9 @@ function AnwserForm() {
             })}
           </div>
         ) : (
-          <p>Loading...</p>
+          <Grid container justify="center" className={classes.progress}>
+            <CircularProgress />
+          </Grid>
         )}
       </Grid>
       <Grid>

src/pages/GetForm.js

 import React, { useState, useEffect } from "react";
 import { useParams, Redirect, useHistory } from "react-router-dom";
 import { makeStyles } from "@material-ui/core/styles";
+import CircularProgress from "@material-ui/core/CircularProgress";
 import Grid from "@material-ui/core/Grid";
 import api from "../api";
 import FormControl from "@material-ui/core/FormControl";
@@ -20,6 +21,9 @@ const useStyles = makeStyles(theme => ({
     left: "90%",
     padding: theme.spacing(1)
   },
+  progress: {
+    marginTop: "5%"
+  },
   selector: {
     width: "100%",
     borderRadius: "2px",
@@ -229,7 +233,9 @@ function GetForm() {
       </Grid>
     </Grid>
   ) : (
-    <p>loading...</p>
+    <Grid container justify="center" className={classes.progress}>
+      <CircularProgress />
+    </Grid>
   );
 }
 

src/pages/ListForms.js

@@ -5,6 +5,7 @@ import Grid from "@material-ui/core/Grid";
 import Container from "@material-ui/core/Container";
 import { makeStyles } from "@material-ui/core/styles";
 import { useHistory } from "react-router-dom";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 // Components
 import CardForm from "../components/fieldsListForms/CardForm.jsx";
@@ -15,6 +16,10 @@ const useStyles = makeStyles(theme => ({
     marginBottom: "15%"
   },
 
+  progress: {
+    marginTop: "5%"
+  },
+
   Forms: {
     textAlign: "center",
     marginBottom: "3%",
@@ -144,8 +149,8 @@ export default function ListForms() {
       </div>
     </>
   ) : (
-    <Grid justify="center">
-      <p>loading...</p>
+    <Grid container justify="center" className={classes.progress}>
+      <CircularProgress />
     </Grid>
   );
 }

src/pages/VisualizeForm.js

@@ -5,6 +5,7 @@ import Grid from "@material-ui/core/Grid";
 import api from "../api";
 import { createMuiTheme, MuiThemeProvider, Button } from "@material-ui/core";
 import { useHistory } from "react-router-dom";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 import FormFieldText from "../components/fieldsVisualizeForm/FormFieldText";
 import FormFieldSelect from "../components/fieldsVisualizeForm/FormFieldSelect";
@@ -23,6 +24,9 @@ const useStyles = makeStyles(theme => ({
       marginBottom: "20%"
     }
   },
+  progress: {
+    marginTop: "5%"
+  },
   pageBody: {
     minHeight: "calc(100vh - 92.4px - 78px)",
     paddingBottom: "78px"
@@ -181,7 +185,9 @@ function VisualizeForm() {
               </Grid>
             </>
           ) : (
-            <p>Loading...</p>
+            <Grid container justify="center" className={classes.progress}>
+              <CircularProgress />
+            </Grid>
           )}
         </Grid>
       </div>