feat: add loading animation before question display (#498)

Co-authored-by: alexandre <alex.fauquette@gmail.com> Fix #496
openfoodfacts · Jan 31, 2023 · c530360 · c530360
1 parent b46f50f
commit c530360
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/i18n/common.json b/src/i18n/common.json
@@ -114,7 +114,8 @@
     "log_in": "Login",
     "sign_up": "Sign up",
     "login_title": "Make your annotation count",
-    "login_description": "Currently you are not logged in Open Food Facts. To get your answers directly applied to products, and associated to your account, consider logging in to your Open Food Facts account, or creating one"
+    "login_description": "Currently you are not logged in Open Food Facts. To get your answers directly applied to products, and associated to your account, consider logging in to your Open Food Facts account, or creating one",
+    "please_wait_while_we_fetch_the_question":"Please wait while we fetch the question!"
   },
   "menu": {
     "title": "Hunger Games",

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -114,7 +114,8 @@
     "log_in": "Login",
     "sign_up": "Sign up",
     "login_title": "Make your annotation count",
-    "login_description": "Currently you are not logged in Open Food Facts. To get your answers directly applied to products, and associated to your account, consider logging in to your Open Food Facts account, or creating one"
+    "login_description": "Currently you are not logged in Open Food Facts. To get your answers directly applied to products, and associated to your account, consider logging in to your Open Food Facts account, or creating one",
+    "please_wait_while_we_fetch_the_question":"Please wait while we fetch the question!"
   },
   "menu": {
     "title": "Hunger Games",

diff --git a/src/pages/questions/QuestionDisplay.jsx b/src/pages/questions/QuestionDisplay.jsx
@@ -10,6 +10,7 @@ import Typography from "@mui/material/Typography";
 import LinkIcon from "@mui/icons-material/Link";
 import DeleteIcon from "@mui/icons-material/Delete";
 import DoneIcon from "@mui/icons-material/Done";
+import CircularProgress from "@mui/material/CircularProgress";
 import MuiLink from "@mui/material/Link";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
@@ -175,7 +176,15 @@ const QuestionDisplay = ({
     );
   }
   if (question === null) {
-    return <p>loading</p>;
+    return (
+      <Box sx={{ width: "100%", textAlign: "center", py: 10, m: 0 }}>
+        <Typography variant="subtitle1">
+          {t("questions.please_wait_while_we_fetch_the_question")}
+        </Typography>
+        <br />
+        <CircularProgress />
+      </Box>
+    );
   }
   return (
     <Stack