fix: aligned loader center while loading pages (#674)

openfoodfacts · Jul 11, 2023 · b4fed40 · b4fed40
1 parent a915cd1
commit b4fed40
Show file tree

Hide file tree

Showing 14 changed files with 53 additions and 29 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -18,7 +18,8 @@ import LoginContext from "./contexts/login";
 import off from "./off";
 import { IS_DEVELOPMENT_MODE } from "./const";
 import ColorModeContext from "./contexts/colorMode";
-import { CircularProgress } from "@mui/material";
+
+import Loader from "./pages/loader";
 
 const EcoScorePage = React.lazy(() => import("./pages/eco-score"));
 const LogoAnnotationPage = React.lazy(() =>
@@ -221,7 +222,7 @@ export default function App() {
   const theme = createTheme(getToken(mode));
 
   return (
-    <React.Suspense fallback={<CircularProgress />}>
+    <React.Suspense fallback={<Loader />}>
       <ColorModeContext.Provider value={colorMode}>
         <ThemeProvider theme={theme}>
           <LoginContext.Provider value={{ ...userState, refresh }}>

diff --git a/src/components/Opportunities.tsx b/src/components/Opportunities.tsx
@@ -8,7 +8,8 @@ import CardContent from "@mui/material/CardContent";
 import Box from "@mui/material/Box";
 import Skeleton from "@mui/material/Skeleton";
 import Button from "@mui/material/Button";
-import { CircularProgress } from "@mui/material";
+
+import Loader from "../pages/loader";
 
 import robotoff from "../robotoff";
 import off from "../off";
@@ -29,7 +30,7 @@ const OpportunityCard = (props) => {
   })}`;
 
   return (
-    <React.Suspense fallback={<CircularProgress />}>
+    <React.Suspense fallback={<Loader />}>
       <Card
         sx={{
           minWidth: 250,
@@ -50,7 +51,7 @@ const OpportunityCard = (props) => {
 };
 
 const CardSkeleton = () => (
-  <React.Suspense fallback={<CircularProgress />}>
+  <React.Suspense fallback={<Loader />}>
     <Card
       sx={{
         minWidth: 250,
@@ -129,7 +130,7 @@ const Opportunities = (props) => {
 
   const lang = getLang();
   return (
-    <React.Suspense fallback={<CircularProgress />}>
+    <React.Suspense fallback={<Loader />}>
       <Box sx={{ mt: 2, px: 2 }}>
         <Typography variant="h6" component="h3">
           {type}

diff --git a/src/pages/eco-score/index.jsx b/src/pages/eco-score/index.jsx
@@ -12,7 +12,7 @@ import Opportunities from "../../components/Opportunities";
 import { DEFAULT_FILTER_STATE } from "../../components/QuestionFilter/const";
 import { useTranslation } from "react-i18next";
 import { capitaliseName } from "../../utils";
-import { CircularProgress } from "@mui/material";
+import Loader from "../loader";
 
 const ecoScoreCards = [
   {
@@ -169,7 +169,7 @@ export default function EcoScore() {
   const [selectedCountry, setSelectedCountry] = React.useState(countryNames[0]);
 
   return (
-    <React.Suspense fallback={<CircularProgress />}>
+    <React.Suspense fallback={<Loader />}>
       <Stack
         spacing={2}
         sx={{

diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
@@ -17,7 +17,7 @@ import UserData from "./UserData";
 
 import { localFavorites } from "../../localeStorageManager";
 import LoginContext from "../../contexts/login";
-import { CircularProgress } from "@mui/material";
+import Loader from "../loader";
 
 const Home = () => {
   const theme = useTheme();
@@ -33,7 +33,7 @@ const Home = () => {
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
   return (
-    <React.Suspense fallback={<CircularProgress />}>
+    <React.Suspense fallback={<Loader />}>
       <Box sx={{ p: 2, alignItems: "center" }}>
         <Typography
           variant="h5"

diff --git a/src/pages/insights/index.jsx b/src/pages/insights/index.jsx
@@ -1,4 +1,4 @@
-import { CircularProgress, Divider, Stack } from "@mui/material";
+import { Divider, Stack } from "@mui/material";
 import * as React from "react";
 
 import Typography from "@mui/material/Typography";
@@ -7,6 +7,8 @@ import FilterInsights from "./FilterInsights";
 import InsightGrid from "./InsightsGrid";
 import { useTranslation } from "react-i18next";
 
+import Loader from "../loader";
+
 import useUrlParams from "../../hooks/useUrlParams";
 
 export default function Insights() {
@@ -25,7 +27,7 @@ export default function Insights() {
   );
 
   return (
-    <React.Suspense fallback={<CircularProgress />}>
+    <React.Suspense fallback={<Loader />}>
       <Stack spacing={2} sx={{ padding: 2 }}>
         <Typography>{t("insights.insights")}</Typography>
         <FilterInsights

diff --git a/src/pages/loader/index.jsx b/src/pages/loader/index.jsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Stack, CircularProgress, CssBaseline } from "@mui/material";
+
+export default function Loader() {
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <Stack
+        sx={{ bgcolor: "#121212", height: "100vh" }}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <CircularProgress />
+      </Stack>
+    </React.Fragment>
+  );
+}
diff --git a/src/pages/logos/LogoDeepSearch.jsx b/src/pages/logos/LogoDeepSearch.jsx
@@ -6,7 +6,6 @@ import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import Paper from "@mui/material/Paper";
 import Link from "@mui/material/Link";
-import CircularProgress from "@mui/material/CircularProgress";
 import LinearProgress from "@mui/material/LinearProgress";
 
 import LogoGrid from "../../components/LogoGrid";
@@ -17,6 +16,8 @@ import useUrlParams from "../../hooks/useUrlParams";
 import AnnotateLogoModal from "../../components/AnnotateLogoModal";
 import { useTranslation } from "react-i18next";
 
+import Loader from "../loader";
+
 const DEFAULT_COUNT = 25;
 
 const transformLogo = (logo) => {
@@ -53,7 +54,7 @@ const LoadingReferenceLogos = () => {
         {t("logos.loading_messages.pending_reference_logos")}
       </Typography>
       <br />
-      <CircularProgress />
+      <Loader />
     </Box>
   );
 };
@@ -299,7 +300,7 @@ export default function LogoSearch() {
   };
 
   return (
-    <React.Suspense fallback={<CircularProgress />}>
+    <React.Suspense fallback={<Loader />}>
       <Box sx={{ padding: 2 }}>
         <Typography variant="h4" sx={{ mb: 2 }}>
           Logo search

diff --git a/src/pages/logos/LogoUpdate.jsx b/src/pages/logos/LogoUpdate.jsx
@@ -24,7 +24,7 @@ import { useTranslation } from "react-i18next";
 
 //  Only for testing purpose
 import { sleep } from "../../utils";
-import { CircularProgress } from "@mui/material";
+import Loader from "../loader";
 
 const getImageURL = (logo) => offService.getImageUrl(logo.image.source_image);
 
@@ -203,7 +203,7 @@ export default function LogoUpdate() {
   }, [logoId]);
 
   return (
-    <React.Suspense fallback={<CircularProgress />}>
+    <React.Suspense fallback={<Loader />}>
       <UpdateLogoForm {...fetchedData} logoId={logoId} />
     </React.Suspense>
   );

diff --git a/src/pages/logos/ProductLogoAnnotations.jsx b/src/pages/logos/ProductLogoAnnotations.jsx
@@ -8,6 +8,7 @@ import MenuItem from "@mui/material/MenuItem";
 import TextField from "@mui/material/TextField";
 
 import { useTranslation } from "react-i18next";
+import Loader from "../loader";
 
 import LabelFilter from "../../components/QuestionFilter/LabelFilter";
 import LogoGrid from "../../components/LogoGrid";
@@ -16,7 +17,6 @@ import { logoTypeOptions } from "../../components/LogoSearchForm";
 import robotoff from "../../robotoff";
 import off from "../../off";
 import useUrlParams from "../../hooks/useUrlParams";
-import { CircularProgress } from "@mui/material";
 
 const PRODUCT_PAGE_SIZE = 2;
 
@@ -212,7 +212,7 @@ export default function AnnotateLogosFromProducts() {
   }, []);
 
   return (
-    <React.Suspense fallback={<CircularProgress />}>
+    <React.Suspense fallback={<Loader />}>
       <Paper sx={{ padding: 2, position: "sticky", top: 0, zIndex: 1 }}>
         <Stack direction="row" spacing={1}>
           <TextField

diff --git a/src/pages/logosValidator/LogoQuestionValidator.jsx b/src/pages/logosValidator/LogoQuestionValidator.jsx
@@ -31,7 +31,7 @@ import off from "../../off";
 import useUrlParams from "../../hooks/useUrlParams";
 
 import { LOGOS } from "./dashboardDefinition";
-import { CircularProgress } from "@mui/material";
+import Loader from "../loader";
 
 const fetchData = async (insightId) => {
   const response = await robotoff.insightDetail(insightId);
@@ -448,7 +448,7 @@ function LogoQuestionValidator() {
 
 export default function WrappedLogoQuestionValidator() {
   return (
-    <React.Suspense fallback={<CircularProgress />}>
+    <React.Suspense fallback={<Loader />}>
       <Provider store={store}>
         <LogoQuestionValidator />
       </Provider>

diff --git a/src/pages/packaging/index.tsx b/src/pages/packaging/index.tsx
@@ -27,7 +27,7 @@ import { getImagesUrls } from "../questions/utils";
 import offService from "../../off";
 import { useTranslation } from "react-i18next";
 import useUrlParams from "../../hooks/useUrlParams";
-import { CircularProgress } from "@mui/material";
+import Loader from "../loader";
 
 const formatData = (innerRows) => {
   const packagings = innerRows
@@ -96,7 +96,7 @@ const Page = () => {
     return <p>Loading...</p>;
   }
   return (
-    <React.Suspense fallback={<CircularProgress />}>
+    <React.Suspense fallback={<Loader />}>
       <Stack direction="row" spacing={1} sx={{ overflow: "auto" }}>
         {getImagesUrls(product.images, product.code).map((src) => (
           <ZoomableImage

diff --git a/src/pages/questions/QuestionDisplay.jsx b/src/pages/questions/QuestionDisplay.jsx
@@ -10,11 +10,12 @@ 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";
 
+import Loader from "../loader";
+
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { CORRECT_INSIGHT, WRONG_INSIGHT, SKIPPED_INSIGHT } from "../../const";
@@ -156,7 +157,7 @@ const QuestionDisplay = ({ question, productData }) => {
             {t("questions.please_wait_while_we_fetch_the_question")}
           </Typography>
           <br />
-          <CircularProgress />
+          <Loader />
         </Box>
       );
     }

diff --git a/src/pages/questions/index.jsx b/src/pages/questions/index.jsx
@@ -19,7 +19,7 @@ import store, {
   nextPageSelector,
 } from "./store";
 import { Provider, useDispatch, useSelector } from "react-redux";
-import { CircularProgress } from "@mui/material";
+import Loader from "../loader";
 
 function QuestionsConsumer() {
   const dispatch = useDispatch();
@@ -69,7 +69,7 @@ function QuestionsConsumer() {
 
 export default function Questions() {
   return (
-    <React.Suspense fallback={<CircularProgress />}>
+    <React.Suspense fallback={<Loader />}>
       <Provider store={store}>
         <QuestionsConsumer />
       </Provider>

diff --git a/src/pages/settings/index.jsx b/src/pages/settings/index.jsx
@@ -12,6 +12,8 @@ import Divider from "@mui/material/Divider";
 import Brightness4Icon from "@mui/icons-material/Brightness4";
 import Brightness7Icon from "@mui/icons-material/Brightness7";
 
+import Loader from "../loader";
+
 import { useTheme } from "@mui/material/styles";
 
 import { useTranslation } from "react-i18next";
@@ -20,7 +22,6 @@ import DevModeContext from "../../contexts/devMode";
 import ColorModeContext from "../../contexts/colorMode";
 import { localSettings, localSettingsKeys } from "../../localeStorageManager";
 import FooterWithLinks from "../../components/Footer";
-import { CircularProgress } from "@mui/material";
 
 export default function Settings() {
   const { t, i18n } = useTranslation();
@@ -52,7 +53,7 @@ export default function Settings() {
   };
 
   return (
-    <React.Suspense fallback={<CircularProgress />}>
+    <React.Suspense fallback={<Loader />}>
       <Stack sx={{ my: 5, mx: 2, alignItems: "flex-start" }} spacing={4}>
         <Typography variant="h4" component="h2" sx={{ mb: 5 }}>
           {t("settings.settings")}