feat(taxonomy-editor-frontend): loading animation (#283)

openfoodfacts · Nov 23, 2023 · 2746f7f · 2746f7f
1 parent eb2bff3
commit 2746f7f
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 32 deletions.
diff --git a/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx b/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
@@ -1,5 +1,6 @@
 import { Alert, Box, Snackbar, Typography, Button } from "@mui/material";
 import SaveIcon from "@mui/icons-material/Save";
+import CircularProgress from "@mui/material/CircularProgress";
 import { useEffect, useState } from "react";
 import useFetch from "../../components/useFetch";
 import ListEntryParents from "./ListEntryParents";
@@ -76,11 +77,18 @@ const AccumulateAllComponents = ({ id, taxonomyName, branchName }) => {
   }
 
   // Loading...
-  if (isPending) {
+  if (isPending && !node) {
     return (
-      <Typography sx={{ ml: 4 }} variant="h5">
-        Loading..
-      </Typography>
+      <Box
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+        }}
+      >
+        <CircularProgress sx={{ textAlign: "center" }} />
+      </Box>
     );
   }
 

diff --git a/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx b/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx
@@ -16,6 +16,7 @@ import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
 import AddBoxIcon from "@mui/icons-material/AddBox";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import CircularProgress from "@mui/material/CircularProgress";
 import ISO6391 from "iso-639-1";
 import { ENTER_KEYCODE } from "../../constants";
 import { greyHexCode } from "../../constants";
@@ -85,11 +86,11 @@ const ListEntryChildren = ({ url, urlPrefix, setUpdateNodeChildren }) => {
       </Typography>
     );
   }
-  if (isPending) {
+  if (isPending && !incomingData) {
     return (
-      <Typography sx={{ ml: 4 }} variant="h5">
-        Loading..
-      </Typography>
+      <Box sx={{ textAlign: "left", m: 5 }}>
+        <CircularProgress />
+      </Box>
     );
   }
   return (
@@ -98,6 +99,11 @@ const ListEntryChildren = ({ url, urlPrefix, setUpdateNodeChildren }) => {
         <Typography sx={{ ml: 4 }} variant="h5">
           Children
         </Typography>
+        {!incomingData && (
+          <Box sx={{ textAlign: "left", m: 3 }}>
+            <CircularProgress size={20} />
+          </Box>
+        )}
         <IconButton
           sx={{ ml: 1, color: greyHexCode }}
           onClick={handleOpenDialog}

diff --git a/taxonomy-editor-frontend/src/pages/editentry/ListEntryParents.tsx b/taxonomy-editor-frontend/src/pages/editentry/ListEntryParents.tsx
@@ -1,6 +1,7 @@
 import { Link } from "react-router-dom";
 
 import { Box, Typography } from "@mui/material";
+import CircularProgress from "@mui/material/CircularProgress";
 
 import useFetch from "../../components/useFetch";
 import type { ParentsAPIResponse } from "../../backend-types/types";
@@ -24,21 +25,29 @@ const ListEntryParents = ({ fetchUrl, linkHrefPrefix }: Props) => {
     );
   }
 
-  if (isPending) {
+  if (isPending && !data) {
     return (
-      <Typography sx={{ ml: 4 }} variant="h5">
-        Loading...
-      </Typography>
+      <Box
+        sx={{
+          textAlign: "center",
+          my: 5,
+        }}
+      >
+        <CircularProgress />
+      </Box>
     );
   }
 
   return (
     <Box>
-      {
-        <Typography sx={{ ml: 4, mb: 1 }} variant="h5">
-          Parents
-        </Typography>
-      }
+      <Typography sx={{ ml: 4, mb: 1 }} variant="h5">
+        Parents
+      </Typography>
+      {!data && (
+        <Box sx={{ textAlign: "left", m: 3 }}>
+          <CircularProgress size={20} />
+        </Box>
+      )}
 
       {relations.length === 0 ? (
         <Typography sx={{ ml: 8, mb: 1 }} variant="h6">

diff --git a/taxonomy-editor-frontend/src/pages/errors/index.jsx b/taxonomy-editor-frontend/src/pages/errors/index.jsx
@@ -12,6 +12,7 @@ import {
   TableContainer,
 } from "@mui/material";
 import MaterialTable from "@material-table/core";
+import CircularProgress from "@mui/material/CircularProgress";
 import { useState, useEffect } from "react";
 
 const Errors = ({ addNavLinks }) => {
@@ -51,8 +52,15 @@ const Errors = ({ addNavLinks }) => {
   }
   if (isPending) {
     return (
-      <Box>
-        <Typography variant="h5">Loading...</Typography>
+      <Box
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+        }}
+      >
+        <CircularProgress sx={{ textAlign: "center" }} />
       </Box>
     );
   }

diff --git a/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx b/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx
@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { Typography, Box, Grid, Link as MuiLink } from "@mui/material";
 import MaterialTable from "@material-table/core";
 import EditIcon from "@mui/icons-material/Edit";
+import CircularProgress from "@mui/material/CircularProgress";
 
 import useFetch from "../../components/useFetch";
 import { API_URL } from "../../constants";
@@ -70,7 +71,11 @@ const GoToProject = ({ clearNavBarLinks }: Props) => {
   }
 
   if (isPending) {
-    return <Typography variant="h5">Loading..</Typography>;
+    return (
+      <Box sx={{ textAlign: "center", my: 10 }}>
+        <CircularProgress />
+      </Box>
+    );
   }
 
   return (

diff --git a/taxonomy-editor-frontend/src/pages/root-nodes/index.tsx b/taxonomy-editor-frontend/src/pages/root-nodes/index.tsx
@@ -17,6 +17,7 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import AddBoxIcon from "@mui/icons-material/AddBox";
 import Dialog from "@mui/material/Dialog";
+import CircularProgress from "@mui/material/CircularProgress";
 
 import CreateNodeDialogContent from "../../components/CreateNodeDialogContent";
 import useFetch from "../../components/useFetch";
@@ -85,8 +86,13 @@ const RootNodes = ({
 
   if (isPending || !nodes) {
     return (
-      <Box>
-        <Typography variant="h5">Loading...</Typography>
+      <Box
+        sx={{
+          textAlign: "center",
+          my: 10,
+        }}
+      >
+        <CircularProgress />
       </Box>
     );
   }

diff --git a/taxonomy-editor-frontend/src/pages/search/SearchResults.tsx b/taxonomy-editor-frontend/src/pages/search/SearchResults.tsx
@@ -1,3 +1,4 @@
+import CircularProgress from "@mui/material/CircularProgress";
 import { useState } from "react";
 
 import {
@@ -78,10 +79,19 @@ const SearchResults = ({ query, taxonomyName, branchName }: Props) => {
         direction="column"
         alignItems="center"
         justifyContent="center"
+        height="100%"
       >
-        <Typography sx={{ mt: 2 }} variant="h5">
-          Loading..
-        </Typography>
+        <Box
+          sx={{
+            flex: 1,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            marginTop: "1em",
+          }}
+        >
+          <CircularProgress sx={{ textAlign: "center" }} />
+        </Box>
       </Grid>
     );
   }

diff --git a/taxonomy-editor-frontend/src/pages/search/index.tsx b/taxonomy-editor-frontend/src/pages/search/index.tsx
@@ -45,16 +45,15 @@ const SearchNode = ({
     <Box>
       <Grid
         container
-        direction="column"
+        display="flex"
+        flexDirection="column"
         alignItems="center"
-        justifyContent="center"
+        justifyContent="flex-start"
+        gap="20px"
       >
-        <Typography sx={{ mt: 4 }} variant="h3">
-          Search
-        </Typography>
+        <Typography variant="h3">Search</Typography>
         <Box
           component="img"
-          sx={{ mt: 2 }}
           width={100}
           height={100}
           src={require("../../assets/classification.png")}
@@ -67,7 +66,7 @@ const SearchNode = ({
           }}
         >
           <TextField
-            sx={{ mt: 3, width: 350 }}
+            sx={{ width: 350 }}
             InputProps={{
               endAdornment: (
                 <InputAdornment position="end">