From bb7f53da1e0b2e3f67917585ce8c8d12ae5c803c Mon Sep 17 00:00:00 2001
From: NihalRadhakrishna <nihalr5000@gmail.com>
Date: Wed, 15 Feb 2023 21:48:29 +0530
Subject: [PATCH 1/7] feat: add load animation instead of text

- after resolving merge conflict
---
 .../src/components/Loader.tsx                 | 20 +++++++++++++++++++
 .../editentry/AccumulateAllComponents.jsx     |  6 +-----
 .../src/pages/editentry/ListEntryChildren.jsx |  6 +-----
 .../src/pages/editentry/ListEntryParents.tsx  |  7 ++-----
 .../src/pages/go-to-project/index.tsx         |  3 ++-
 .../src/pages/root-nodes/index.tsx            |  7 ++-----
 6 files changed, 28 insertions(+), 21 deletions(-)
 create mode 100644 taxonomy-editor-frontend/src/components/Loader.tsx

diff --git a/taxonomy-editor-frontend/src/components/Loader.tsx b/taxonomy-editor-frontend/src/components/Loader.tsx
new file mode 100644
index 00000000..8e300158
--- /dev/null
+++ b/taxonomy-editor-frontend/src/components/Loader.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { Box } from "@mui/material";
+import CircularProgress from "@mui/material/CircularProgress";
+
+const Loader = () => {
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        textAlign: "center",
+        py: 10,
+        m: 0,
+      }}
+    >
+      <CircularProgress />
+    </Box>
+  );
+};
+
+export default Loader;
diff --git a/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx b/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
index b389bad6..f989babf 100644
--- a/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
+++ b/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
@@ -77,11 +77,7 @@ const AccumulateAllComponents = ({ id, taxonomyName, branchName }) => {
 
   // Loading...
   if (isPending) {
-    return (
-      <Typography sx={{ ml: 4 }} variant="h5">
-        Loading..
-      </Typography>
-    );
+    return <Loader />;
   }
 
   // Helper functions for Dialog component
diff --git a/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx b/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx
index 48589d39..cb3c14a1 100644
--- a/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx
+++ b/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx
@@ -86,11 +86,7 @@ const ListEntryChildren = ({ url, urlPrefix, setUpdateNodeChildren }) => {
     );
   }
   if (isPending) {
-    return (
-      <Typography sx={{ ml: 4 }} variant="h5">
-        Loading..
-      </Typography>
-    );
+    return <Loader />;
   }
   return (
     <Box>
diff --git a/taxonomy-editor-frontend/src/pages/editentry/ListEntryParents.tsx b/taxonomy-editor-frontend/src/pages/editentry/ListEntryParents.tsx
index 4889abcd..ee1c7f53 100644
--- a/taxonomy-editor-frontend/src/pages/editentry/ListEntryParents.tsx
+++ b/taxonomy-editor-frontend/src/pages/editentry/ListEntryParents.tsx
@@ -4,6 +4,7 @@ import { Box, Typography } from "@mui/material";
 
 import useFetch from "../../components/useFetch";
 import type { ParentsAPIResponse } from "../../backend-types/types";
+import Loader from "../../components/Loader";
 
 type Props = {
   fetchUrl: string;
@@ -25,11 +26,7 @@ const ListEntryParents = ({ fetchUrl, linkHrefPrefix }: Props) => {
   }
 
   if (isPending) {
-    return (
-      <Typography sx={{ ml: 4 }} variant="h5">
-        Loading...
-      </Typography>
-    );
+    return <Loader />;
   }
 
   return (
diff --git a/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx b/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx
index 7d054e87..ae054069 100644
--- a/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx
+++ b/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx
@@ -9,6 +9,7 @@ import useFetch from "../../components/useFetch";
 import { API_URL } from "../../constants";
 import { toSnakeCase, toTitleCase } from "../../utils";
 import type { ProjectsAPIResponse } from "../../backend-types/types";
+import Loader from "../../components/Loader";
 
 type ProjectType = {
   id: string;
@@ -70,7 +71,7 @@ const GoToProject = ({ clearNavBarLinks }: Props) => {
   }
 
   if (isPending) {
-    return <Typography variant="h5">Loading..</Typography>;
+    return <Loader />;
   }
 
   return (
diff --git a/taxonomy-editor-frontend/src/pages/root-nodes/index.tsx b/taxonomy-editor-frontend/src/pages/root-nodes/index.tsx
index 58213b04..d4c6ffef 100644
--- a/taxonomy-editor-frontend/src/pages/root-nodes/index.tsx
+++ b/taxonomy-editor-frontend/src/pages/root-nodes/index.tsx
@@ -24,6 +24,7 @@ import useFetch from "../../components/useFetch";
 import { toTitleCase, createBaseURL } from "../../utils";
 import { greyHexCode } from "../../constants";
 import type { RootEntriesAPIResponse } from "../../backend-types/types";
+import Loader from "../../components/Loader";
 
 type RootNodesProps = {
   addNavLinks: ({
@@ -79,11 +80,7 @@ const RootNodes = ({
   }
 
   if (isPending || !nodes) {
-    return (
-      <Box>
-        <Typography variant="h5">Loading...</Typography>
-      </Box>
-    );
+    return <Loader />;
   }
 
   return (

From 4f61858bbedda8c14f6ba19574626485aa2e8bd8 Mon Sep 17 00:00:00 2001
From: NihalRadhakrishna <nihalr5000@gmail.com>
Date: Thu, 16 Feb 2023 22:50:06 +0530
Subject: [PATCH 2/7] small fix

---
 .../src/pages/editentry/AccumulateAllComponents.jsx              | 1 +
 .../src/pages/editentry/ListEntryChildren.jsx                    | 1 +
 2 files changed, 2 insertions(+)

diff --git a/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx b/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
index f989babf..e1488ff9 100644
--- a/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
+++ b/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
@@ -9,6 +9,7 @@ import ListAllEntryProperties from "./ListAllEntryProperties";
 import ListAllNonEntryInfo from "./ListAllNonEntryInfo";
 import equal from "fast-deep-equal";
 import { createURL, getNodeType } from "../../utils";
+import Loader from "../../components/Loader";
 
 /**
  * Component used for rendering node information
diff --git a/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx b/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx
index cb3c14a1..af1ccb80 100644
--- a/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx
+++ b/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx
@@ -19,6 +19,7 @@ import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import ISO6391 from "iso-639-1";
 import { ENTER_KEYCODE } from "../../constants";
 import { greyHexCode } from "../../constants";
+import Loader from "../../components/Loader";
 
 const ListEntryChildren = ({ url, urlPrefix, setUpdateNodeChildren }) => {
   const [relations, setRelations] = useState(null);

From 84edb0e76aac80d501d47483c19660aafb6b2cdc Mon Sep 17 00:00:00 2001
From: NihalRadhakrishna <nihalr5000@gmail.com>
Date: Mon, 20 Feb 2023 22:48:33 +0530
Subject: [PATCH 3/7] fix: modify loader component

---
 .../src/components/Loader.tsx                 | 20 -------------------
 .../editentry/AccumulateAllComponents.jsx     | 13 ++++++++++--
 .../src/pages/editentry/ListEntryChildren.jsx | 13 ++++++++++--
 .../src/pages/editentry/ListEntryParents.tsx  | 13 ++++++++++--
 .../src/pages/go-to-project/index.tsx         | 13 ++++++++++--
 .../src/pages/root-nodes/index.tsx            | 13 ++++++++++--
 6 files changed, 55 insertions(+), 30 deletions(-)
 delete mode 100644 taxonomy-editor-frontend/src/components/Loader.tsx

diff --git a/taxonomy-editor-frontend/src/components/Loader.tsx b/taxonomy-editor-frontend/src/components/Loader.tsx
deleted file mode 100644
index 8e300158..00000000
--- a/taxonomy-editor-frontend/src/components/Loader.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import CircularProgress from "@mui/material/CircularProgress";
-
-const Loader = () => {
-  return (
-    <Box
-      sx={{
-        width: "100%",
-        textAlign: "center",
-        py: 10,
-        m: 0,
-      }}
-    >
-      <CircularProgress />
-    </Box>
-  );
-};
-
-export default Loader;
diff --git a/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx b/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
index e1488ff9..ccea310c 100644
--- 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";
@@ -9,7 +10,6 @@ import ListAllEntryProperties from "./ListAllEntryProperties";
 import ListAllNonEntryInfo from "./ListAllNonEntryInfo";
 import equal from "fast-deep-equal";
 import { createURL, getNodeType } from "../../utils";
-import Loader from "../../components/Loader";
 
 /**
  * Component used for rendering node information
@@ -78,7 +78,16 @@ const AccumulateAllComponents = ({ id, taxonomyName, branchName }) => {
 
   // Loading...
   if (isPending) {
-    return <Loader />;
+    return (
+      <Box
+        sx={{
+          textAlign: "center",
+          my: 5,
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
   }
 
   // Helper functions for Dialog component
diff --git a/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx b/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx
index af1ccb80..4c754fc0 100644
--- a/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx
+++ b/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx
@@ -16,10 +16,10 @@ 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";
-import Loader from "../../components/Loader";
 
 const ListEntryChildren = ({ url, urlPrefix, setUpdateNodeChildren }) => {
   const [relations, setRelations] = useState(null);
@@ -87,7 +87,16 @@ const ListEntryChildren = ({ url, urlPrefix, setUpdateNodeChildren }) => {
     );
   }
   if (isPending) {
-    return <Loader />;
+    return (
+      <Box
+        sx={{
+          textAlign: "center",
+          my: 5,
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
   }
   return (
     <Box>
diff --git a/taxonomy-editor-frontend/src/pages/editentry/ListEntryParents.tsx b/taxonomy-editor-frontend/src/pages/editentry/ListEntryParents.tsx
index ee1c7f53..9a302348 100644
--- a/taxonomy-editor-frontend/src/pages/editentry/ListEntryParents.tsx
+++ b/taxonomy-editor-frontend/src/pages/editentry/ListEntryParents.tsx
@@ -1,10 +1,10 @@
 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";
-import Loader from "../../components/Loader";
 
 type Props = {
   fetchUrl: string;
@@ -26,7 +26,16 @@ const ListEntryParents = ({ fetchUrl, linkHrefPrefix }: Props) => {
   }
 
   if (isPending) {
-    return <Loader />;
+    return (
+      <Box
+        sx={{
+          textAlign: "center",
+          my: 5,
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
   }
 
   return (
diff --git a/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx b/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx
index ae054069..1a946110 100644
--- a/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx
+++ b/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx
@@ -4,12 +4,12 @@ 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";
 import { toSnakeCase, toTitleCase } from "../../utils";
 import type { ProjectsAPIResponse } from "../../backend-types/types";
-import Loader from "../../components/Loader";
 
 type ProjectType = {
   id: string;
@@ -71,7 +71,16 @@ const GoToProject = ({ clearNavBarLinks }: Props) => {
   }
 
   if (isPending) {
-    return <Loader />;
+    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
index d4c6ffef..ee8d0d6b 100644
--- a/taxonomy-editor-frontend/src/pages/root-nodes/index.tsx
+++ b/taxonomy-editor-frontend/src/pages/root-nodes/index.tsx
@@ -18,13 +18,13 @@ import TableRow from "@mui/material/TableRow";
 import EditIcon from "@mui/icons-material/Edit";
 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";
 import { toTitleCase, createBaseURL } from "../../utils";
 import { greyHexCode } from "../../constants";
 import type { RootEntriesAPIResponse } from "../../backend-types/types";
-import Loader from "../../components/Loader";
 
 type RootNodesProps = {
   addNavLinks: ({
@@ -80,7 +80,16 @@ const RootNodes = ({
   }
 
   if (isPending || !nodes) {
-    return <Loader />;
+    return (
+      <Box
+        sx={{
+          textAlign: "center",
+          my: 10,
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
   }
 
   return (

From 1da9e0333e268036b76487f3cc0401c63fa179a9 Mon Sep 17 00:00:00 2001
From: "alice.juan" <alice.juan@student-cs.fr>
Date: Thu, 9 Nov 2023 13:51:04 +0100
Subject: [PATCH 4/7] one spin loading for editor page and then one for each
 list (parents and children)

---
 .../src/pages/editentry/AccumulateAllComponents.jsx      | 9 ++-------
 .../src/pages/go-to-project/index.tsx                    | 7 +------
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx b/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
index ccea310c..8295e0d4 100644
--- a/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
+++ b/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
@@ -77,14 +77,9 @@ const AccumulateAllComponents = ({ id, taxonomyName, branchName }) => {
   }
 
   // Loading...
-  if (isPending) {
+  if (isPending && !node) {
     return (
-      <Box
-        sx={{
-          textAlign: "center",
-          my: 5,
-        }}
-      >
+      <Box sx={{ textAlign: "center", my: 5 }}>
         <CircularProgress />
       </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
index 1a946110..9520f0ba 100644
--- a/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx
+++ b/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx
@@ -72,12 +72,7 @@ const GoToProject = ({ clearNavBarLinks }: Props) => {
 
   if (isPending) {
     return (
-      <Box
-        sx={{
-          textAlign: "center",
-          my: 10,
-        }}
-      >
+      <Box sx={{ textAlign: "center", my: 10}}>
         <CircularProgress />
       </Box>
     );

From dedf138968c5eb0356e9f5be255a217bc3b72bdc Mon Sep 17 00:00:00 2001
From: "alice.juan" <alice.juan@student-cs.fr>
Date: Thu, 9 Nov 2023 13:57:56 +0100
Subject: [PATCH 5/7] replace loading text by spinner in search page

---
 taxonomy-editor-frontend/src/pages/search/SearchResults.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/taxonomy-editor-frontend/src/pages/search/SearchResults.tsx b/taxonomy-editor-frontend/src/pages/search/SearchResults.tsx
index 65e5ee5d..07fe39a3 100644
--- 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 { Link } from "react-router-dom";
 
@@ -82,7 +83,7 @@ const SearchResults = ({ query, taxonomyName, branchName }: Props) => {
         justifyContent="center"
       >
         <Typography sx={{ mt: 2 }} variant="h5">
-          Loading..
+          <CircularProgress/>
         </Typography>
       </Grid>
     );

From 7b565c899057db35107c852f6063afc18d7cb049 Mon Sep 17 00:00:00 2001
From: "alice.juan" <alice.juan@student-cs.fr>
Date: Thu, 9 Nov 2023 16:02:54 +0100
Subject: [PATCH 6/7] add circular progress in errors page, change some css in
 others

---
 .../editentry/AccumulateAllComponents.jsx     |  4 +--
 .../src/pages/editentry/ListEntryChildren.jsx | 14 +++++------
 .../src/pages/editentry/ListEntryParents.tsx  |  9 ++++---
 .../src/pages/errors/index.jsx                |  5 ++--
 .../src/pages/search/SearchResults.tsx        |  7 +++---
 .../src/pages/search/index.tsx                | 25 ++++++++++---------
 6 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx b/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
index 8295e0d4..5d8b1d86 100644
--- a/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
+++ b/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
@@ -79,8 +79,8 @@ const AccumulateAllComponents = ({ id, taxonomyName, branchName }) => {
   // Loading...
   if (isPending && !node) {
     return (
-      <Box sx={{ textAlign: "center", my: 5 }}>
-        <CircularProgress />
+      <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
index 4c754fc0..8dc2ed74 100644
--- a/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx
+++ b/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx
@@ -86,14 +86,9 @@ const ListEntryChildren = ({ url, urlPrefix, setUpdateNodeChildren }) => {
       </Typography>
     );
   }
-  if (isPending) {
+  if (isPending && !incomingData) {
     return (
-      <Box
-        sx={{
-          textAlign: "center",
-          my: 5,
-        }}
-      >
+      <Box sx={{ textAlign: "left", m: 5 }}>
         <CircularProgress />
       </Box>
     );
@@ -104,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
index 9a302348..ac3d7356 100644
--- a/taxonomy-editor-frontend/src/pages/editentry/ListEntryParents.tsx
+++ b/taxonomy-editor-frontend/src/pages/editentry/ListEntryParents.tsx
@@ -25,7 +25,7 @@ const ListEntryParents = ({ fetchUrl, linkHrefPrefix }: Props) => {
     );
   }
 
-  if (isPending) {
+  if (isPending && !data) {
     return (
       <Box
         sx={{
@@ -40,11 +40,14 @@ const ListEntryParents = ({ fetchUrl, linkHrefPrefix }: Props) => {
 
   return (
     <Box>
-      {
         <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
index d2ea9739..2f34ff59 100644
--- 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,8 @@ 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/search/SearchResults.tsx b/taxonomy-editor-frontend/src/pages/search/SearchResults.tsx
index 07fe39a3..35c4086d 100644
--- a/taxonomy-editor-frontend/src/pages/search/SearchResults.tsx
+++ b/taxonomy-editor-frontend/src/pages/search/SearchResults.tsx
@@ -81,10 +81,11 @@ const SearchResults = ({ query, taxonomyName, branchName }: Props) => {
         direction="column"
         alignItems="center"
         justifyContent="center"
+        height="100%"
       >
-        <Typography sx={{ mt: 2 }} variant="h5">
-          <CircularProgress/>
-        </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
index 69eb7465..1b698f97 100644
--- a/taxonomy-editor-frontend/src/pages/search/index.tsx
+++ b/taxonomy-editor-frontend/src/pages/search/index.tsx
@@ -45,16 +45,17 @@ 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">
+        <Typography variant="h3"> 
           Search
         </Typography>
         <Box
           component="img"
-          sx={{ mt: 2 }}
           width={100}
           height={100}
           src={require("../../assets/classification.png")}
@@ -67,7 +68,7 @@ const SearchNode = ({
           }}
         >
           <TextField
-            sx={{ mt: 3, width: 350 }}
+            sx={{ width: 350 }}
             InputProps={{
               endAdornment: (
                 <InputAdornment position="end">
@@ -92,13 +93,13 @@ const SearchNode = ({
           />
         </form>
       </Grid>
-      {queryFetchString !== "" && (
-        <SearchResults
-          query={queryFetchString}
-          taxonomyName={taxonomyName}
-          branchName={branchName}
-        />
-      )}
+        {queryFetchString !== "" && (
+          <SearchResults
+            query={queryFetchString}
+            taxonomyName={taxonomyName}
+            branchName={branchName}
+          />
+        )}
     </Box>
   );
 };

From 59cccab96a0373e64b6697bd27aeabc37714acb3 Mon Sep 17 00:00:00 2001
From: "alice.juan" <alice.juan@student-cs.fr>
Date: Thu, 9 Nov 2023 16:37:04 +0100
Subject: [PATCH 7/7] lint changes

---
 .../editentry/AccumulateAllComponents.jsx      | 11 +++++++++--
 .../src/pages/editentry/ListEntryChildren.jsx  |  6 +++---
 .../src/pages/editentry/ListEntryParents.tsx   | 16 ++++++++--------
 .../src/pages/errors/index.jsx                 | 11 +++++++++--
 .../src/pages/go-to-project/index.tsx          |  2 +-
 .../src/pages/search/SearchResults.tsx         | 12 ++++++++++--
 .../src/pages/search/index.tsx                 | 18 ++++++++----------
 7 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx b/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
index 5d8b1d86..ffecbe74 100644
--- a/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
+++ b/taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx
@@ -79,8 +79,15 @@ const AccumulateAllComponents = ({ id, taxonomyName, branchName }) => {
   // Loading...
   if (isPending && !node) {
     return (
-      <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
-          <CircularProgress sx={{ textAlign: "center" }}/>
+      <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
index 8dc2ed74..14b897f1 100644
--- a/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx
+++ b/taxonomy-editor-frontend/src/pages/editentry/ListEntryChildren.jsx
@@ -99,11 +99,11 @@ const ListEntryChildren = ({ url, urlPrefix, setUpdateNodeChildren }) => {
         <Typography sx={{ ml: 4 }} variant="h5">
           Children
         </Typography>
-        { !incomingData &&
+        {!incomingData && (
           <Box sx={{ textAlign: "left", m: 3 }}>
-            <CircularProgress size={20}/>
+            <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
index ac3d7356..d89d8b39 100644
--- a/taxonomy-editor-frontend/src/pages/editentry/ListEntryParents.tsx
+++ b/taxonomy-editor-frontend/src/pages/editentry/ListEntryParents.tsx
@@ -40,14 +40,14 @@ const ListEntryParents = ({ fetchUrl, linkHrefPrefix }: Props) => {
 
   return (
     <Box>
-        <Typography sx={{ ml: 4, mb: 1 }} variant="h5">
-          Parents
-        </Typography>
-        { !data &&
-          <Box sx={{ textAlign: "left", m: 3 }}>
-            <CircularProgress size={20}/>
-          </Box>
-        }
+      <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
index 2f34ff59..72969df3 100644
--- a/taxonomy-editor-frontend/src/pages/errors/index.jsx
+++ b/taxonomy-editor-frontend/src/pages/errors/index.jsx
@@ -52,8 +52,15 @@ const Errors = ({ addNavLinks }) => {
   }
   if (isPending) {
     return (
-      <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
-          <CircularProgress sx={{ textAlign: "center" }}/>
+      <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
index 9520f0ba..6693cba2 100644
--- a/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx
+++ b/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx
@@ -72,7 +72,7 @@ const GoToProject = ({ clearNavBarLinks }: Props) => {
 
   if (isPending) {
     return (
-      <Box sx={{ textAlign: "center", my: 10}}>
+      <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
index 35c4086d..f4c82a8b 100644
--- a/taxonomy-editor-frontend/src/pages/search/SearchResults.tsx
+++ b/taxonomy-editor-frontend/src/pages/search/SearchResults.tsx
@@ -83,8 +83,16 @@ const SearchResults = ({ query, taxonomyName, branchName }: Props) => {
         justifyContent="center"
         height="100%"
       >
-        <Box sx={{flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '1em' }}>
-          <CircularProgress sx={{ textAlign: "center" }}/>
+        <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
index 1b698f97..45b89f07 100644
--- a/taxonomy-editor-frontend/src/pages/search/index.tsx
+++ b/taxonomy-editor-frontend/src/pages/search/index.tsx
@@ -51,9 +51,7 @@ const SearchNode = ({
         justifyContent="flex-start"
         gap="20px"
       >
-        <Typography variant="h3"> 
-          Search
-        </Typography>
+        <Typography variant="h3">Search</Typography>
         <Box
           component="img"
           width={100}
@@ -93,13 +91,13 @@ const SearchNode = ({
           />
         </form>
       </Grid>
-        {queryFetchString !== "" && (
-          <SearchResults
-            query={queryFetchString}
-            taxonomyName={taxonomyName}
-            branchName={branchName}
-          />
-        )}
+      {queryFetchString !== "" && (
+        <SearchResults
+          query={queryFetchString}
+          taxonomyName={taxonomyName}
+          branchName={branchName}
+        />
+      )}
     </Box>
   );
 };