From 3a9514bc5086cdf99b741c618f56377d3d896d4b Mon Sep 17 00:00:00 2001
From: Richard Fernando Heise Ferreira <rfhf19@inf.ufpr.br>
Date: Wed, 30 Sep 2020 11:02:26 -0300
Subject: [PATCH] Issue #35: Loading is now a progress gif
Signed-off-by: Richard Heise <rfhf19@inf.ufpr.br>
---
src/components/fieldsAnswerForm/FormFieldSubform.js | 10 +++++++---
.../fieldsGetForm/JornalFolder/FormFieldSubform.js | 10 +++++++---
.../fieldsGetForm/SummaryFolder/FormFieldSubform.js | 8 +++++++-
.../fieldsVisualizeForm/FormFieldSubform.js | 11 ++++++++---
src/pages/AnswerForm.js | 8 +++++++-
src/pages/GetForm.js | 8 +++++++-
src/pages/ListForms.js | 9 +++++++--
src/pages/VisualizeForm.js | 8 +++++++-
8 files changed, 57 insertions(+), 15 deletions(-)
diff --git a/src/components/fieldsAnswerForm/FormFieldSubform.js b/src/components/fieldsAnswerForm/FormFieldSubform.js
index e8a139f..6d87aa6 100644
--- a/src/components/fieldsAnswerForm/FormFieldSubform.js
+++ b/src/components/fieldsAnswerForm/FormFieldSubform.js
@@ -1,9 +1,8 @@
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>
);
diff --git a/src/components/fieldsGetForm/JornalFolder/FormFieldSubform.js b/src/components/fieldsGetForm/JornalFolder/FormFieldSubform.js
index 78d14e5..f92ab2f 100644
--- a/src/components/fieldsGetForm/JornalFolder/FormFieldSubform.js
+++ b/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>
diff --git a/src/components/fieldsGetForm/SummaryFolder/FormFieldSubform.js b/src/components/fieldsGetForm/SummaryFolder/FormFieldSubform.js
index b784f80..cea4392 100644
--- a/src/components/fieldsGetForm/SummaryFolder/FormFieldSubform.js
+++ b/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>
</>
diff --git a/src/components/fieldsVisualizeForm/FormFieldSubform.js b/src/components/fieldsVisualizeForm/FormFieldSubform.js
index ce45234..038d612 100644
--- a/src/components/fieldsVisualizeForm/FormFieldSubform.js
+++ b/src/components/fieldsVisualizeForm/FormFieldSubform.js
@@ -1,14 +1,14 @@
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>
)}
</>
);
diff --git a/src/pages/AnswerForm.js b/src/pages/AnswerForm.js
index 35425ac..08e0795 100644
--- a/src/pages/AnswerForm.js
+++ b/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>
diff --git a/src/pages/GetForm.js b/src/pages/GetForm.js
index 849869e..0449266 100644
--- a/src/pages/GetForm.js
+++ b/src/pages/GetForm.js
@@ -1,6 +1,7 @@
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>
);
}
diff --git a/src/pages/ListForms.js b/src/pages/ListForms.js
index c65df33..7ecefdc 100644
--- a/src/pages/ListForms.js
+++ b/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>
);
}
diff --git a/src/pages/VisualizeForm.js b/src/pages/VisualizeForm.js
index ea9951e..e4ff0a4 100644
--- a/src/pages/VisualizeForm.js
+++ b/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>
--
GitLab