feat: Add lazy import for diffrent routes

- imported routes from lazy imports - added suspense wrapper around all pages
openfoodfacts · Jul 4, 2023 · 2525c7a · 2525c7a
1 parent c526e1c
commit 2525c7a
Show file tree

Hide file tree

Showing 17 changed files with 455 additions and 416 deletions.
diff --git a/src/App.js b/src/App.js
@@ -4,7 +4,21 @@ import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { Routes, Route, useLocation } from "react-router-dom";
 import { useMatomo } from "@jonkoops/matomo-tracker-react";
 import axios from "axios";
+
+import ResponsiveAppBar from "./components/ResponsiveAppBar";
+import DevModeContext from "./contexts/devMode";
 import {
+  getColor,
+  getIsDevMode,
+  getVisiblePages,
+  localSettingsKeys,
+  localSettings,
+} from "./localeStorageManager";
+import LoginContext from "./contexts/login";
+import off from "./off";
+import { IS_DEVELOPMENT_MODE } from "./const";
+import ColorModeContext from "./contexts/colorMode";
+const {
   EcoScorePage,
   LogoAnnotationPage,
   LogoSearchPage,
@@ -22,20 +36,7 @@ import {
   PackagingPage,
   LogoQuestionValidator,
   DashBoard,
-} from "./pages";
-import ResponsiveAppBar from "./components/ResponsiveAppBar";
-import DevModeContext from "./contexts/devMode";
-import {
-  getColor,
-  getIsDevMode,
-  getVisiblePages,
-  localSettingsKeys,
-  localSettings,
-} from "./localeStorageManager";
-import LoginContext from "./contexts/login";
-import off from "./off";
-import { IS_DEVELOPMENT_MODE } from "./const";
-import ColorModeContext from "./contexts/colorMode";
+} = React.lazy(() => import("./pages"));
 
 // OFF colors
 const latte = "#F6F3F0";

diff --git a/src/pages/eco-score/index.jsx b/src/pages/eco-score/index.jsx
@@ -12,6 +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";
 
 const ecoScoreCards = [
   {
@@ -168,49 +169,51 @@ export default function EcoScore() {
   const [selectedCountry, setSelectedCountry] = React.useState(countryNames[0]);
 
   return (
-    <Stack
-      spacing={2}
-      sx={{
-        padding: 5,
-      }}
-    >
-      <Typography>{t("eco-score.description")}</Typography>
-      <Box
+    <React.Suspense fallback={<CircularProgress />}>
+      <Stack
+        spacing={2}
         sx={{
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
-          gridGap: "10px 50px",
+          padding: 5,
         }}
       >
-        {ecoScoreCards.map((props) => (
-          <Box key={props.title}>
-            <SmallQuestionCard {...props} />
-          </Box>
-        ))}
-      </Box>
+        <Typography>{t("eco-score.description")}</Typography>
+        <Box
+          sx={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+            gridGap: "10px 50px",
+          }}
+        >
+          {ecoScoreCards.map((props) => (
+            <Box key={props.title}>
+              <SmallQuestionCard {...props} />
+            </Box>
+          ))}
+        </Box>
 
-      <Divider />
-      <TextField
-        select
-        label={t("eco-score.countryLabel")}
-        value={selectedCountry}
-        onChange={(event) => {
-          setSelectedCountry(event.target.value);
-        }}
-        sx={{ width: 200 }}
-      >
-        {countryNames.map((country) => (
-          <MenuItem value={country} key={country}>
-            {capitaliseName(country)}
-          </MenuItem>
-        ))}
-      </TextField>
+        <Divider />
+        <TextField
+          select
+          label={t("eco-score.countryLabel")}
+          value={selectedCountry}
+          onChange={(event) => {
+            setSelectedCountry(event.target.value);
+          }}
+          sx={{ width: 200 }}
+        >
+          {countryNames.map((country) => (
+            <MenuItem value={country} key={country}>
+              {capitaliseName(country)}
+            </MenuItem>
+          ))}
+        </TextField>
 
-      <Opportunities
-        type="category"
-        country={selectedCountry}
-        campaign="agribalyse-category"
-      />
-    </Stack>
+        <Opportunities
+          type="category"
+          country={selectedCountry}
+          campaign="agribalyse-category"
+        />
+      </Stack>
+    </React.Suspense>
   );
 }
diff --git a/src/pages/flaggedImages/index.jsx b/src/pages/flaggedImages/index.jsx
@@ -30,54 +30,58 @@ export default function FlaggedImages() {
     return <p>{t(`flagged_images.loading`)}</p>;
   }
   return (
-    <Box>
-      <Box sx={{ padding: 2 }}>
-        <Typography>{t("flagged_images.title")}</Typography>
-        <table>
-          {data.map(({ code, imgid }) => (
-            <tr key={`${code}-${imgid}`}>
-              <td>
-                <a
-                  target="_blank"
-                  href={off.getProductEditUrl(code)}
-                  rel="noreferrer"
-                >
-                  {code}
-                </a>
-              </td>
-              <td>
-                <img
-                  src={getImageUrl(code, imgid).replace(".jpg", ".400.jpg")}
-                  height={200}
-                  alt=""
-                />
-              </td>
-              <td>
-                <IconButton
-                  onClick={() => {
-                    axios.delete(
-                      `https://amathjourney.com/api/off-annotation/flag-image/${code}`,
-                      {
-                        mode: "no-cors",
-                        data: {
-                          imgid,
-                        },
-                      }
-                    );
-                    setData((prev) =>
-                      prev.filter(
-                        (line) => line.code !== code || line.imgid !== imgid
-                      )
-                    );
-                  }}
-                >
-                  <DeleteOutlineIcon sx={{ cursor: "pointer", color: "red" }} />
-                </IconButton>
-              </td>
-            </tr>
-          ))}
-        </table>
+    <React.Suspense>
+      <Box>
+        <Box sx={{ padding: 2 }}>
+          <Typography>{t("flagged_images.title")}</Typography>
+          <table>
+            {data.map(({ code, imgid }) => (
+              <tr key={`${code}-${imgid}`}>
+                <td>
+                  <a
+                    target="_blank"
+                    href={off.getProductEditUrl(code)}
+                    rel="noreferrer"
+                  >
+                    {code}
+                  </a>
+                </td>
+                <td>
+                  <img
+                    src={getImageUrl(code, imgid).replace(".jpg", ".400.jpg")}
+                    height={200}
+                    alt=""
+                  />
+                </td>
+                <td>
+                  <IconButton
+                    onClick={() => {
+                      axios.delete(
+                        `https://amathjourney.com/api/off-annotation/flag-image/${code}`,
+                        {
+                          mode: "no-cors",
+                          data: {
+                            imgid,
+                          },
+                        }
+                      );
+                      setData((prev) =>
+                        prev.filter(
+                          (line) => line.code !== code || line.imgid !== imgid
+                        )
+                      );
+                    }}
+                  >
+                    <DeleteOutlineIcon
+                      sx={{ cursor: "pointer", color: "red" }}
+                    />
+                  </IconButton>
+                </td>
+              </tr>
+            ))}
+          </table>
+        </Box>
       </Box>
-    </Box>
+    </React.Suspense>
   );
 }
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
@@ -17,6 +17,7 @@ import UserData from "./UserData";
 
 import { localFavorites } from "../../localeStorageManager";
 import LoginContext from "../../contexts/login";
+import { CircularProgress } from "@mui/material";
 
 const Home = () => {
   const theme = useTheme();
@@ -32,7 +33,7 @@ const Home = () => {
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
   return (
-    <>
+    <React.Suspense fallback={<CircularProgress />}>
       <Box sx={{ p: 2, alignItems: "center" }}>
         <Typography
           variant="h5"
@@ -162,7 +163,7 @@ const Home = () => {
 
       <Divider sx={{ width: "100%" }} light />
       <FooterWithLinks />
-    </>
+    </React.Suspense>
   );
 };
 

diff --git a/src/pages/insights/index.jsx b/src/pages/insights/index.jsx
@@ -1,4 +1,4 @@
-import { Divider, Stack } from "@mui/material";
+import { CircularProgress, Divider, Stack } from "@mui/material";
 import * as React from "react";
 
 import Typography from "@mui/material/Typography";
@@ -25,19 +25,21 @@ export default function Insights() {
   );
 
   return (
-    <Stack spacing={2} sx={{ padding: 2 }}>
-      <Typography>{t("insights.insights")}</Typography>
-      <FilterInsights
-        filterState={filterState}
-        setFilterState={setFilterState}
-      />
-      <Divider />
-      <div style={{ height: "250px" }}>
-        <InsightGrid
+    <React.Suspense fallback={<CircularProgress />}>
+      <Stack spacing={2} sx={{ padding: 2 }}>
+        <Typography>{t("insights.insights")}</Typography>
+        <FilterInsights
           filterState={filterState}
           setFilterState={setFilterState}
         />
-      </div>
-    </Stack>
+        <Divider />
+        <div style={{ height: "250px" }}>
+          <InsightGrid
+            filterState={filterState}
+            setFilterState={setFilterState}
+          />
+        </div>
+      </Stack>
+    </React.Suspense>
   );
 }