⚡️ Lazy load all charts

Author: pehovorka

src/components/card/OrpVaccinations/DoseOrderCumulativeDosesChart/DoseOrderCumulativeDosesChartContainer.js

@@ -1,11 +1,15 @@
-import React, { useState } from "react";
+import React, { lazy, Suspense, useState } from "react";
 import PropTypes from "prop-types";
 
 import { Box, Grid, Typography } from "@material-ui/core";
+import { Skeleton } from "@material-ui/lab";
 
 import { DateLimitSelect } from "../..";
 import { convertToDoseOrderCumulativeDosesData } from "../orpVaccinationsUtils";
-import DoseOrderCumulativeDosesChart from "./DoseOrderCumulativeDosesChart";
+
+const DoseOrderCumulativeDosesChart = lazy(() =>
+  import("./DoseOrderCumulativeDosesChart")
+);
 
 export default function DoseOrderCumulativeDosesChartContainer({
   data,
@@ -39,10 +43,16 @@ export default function DoseOrderCumulativeDosesChartContainer({
           </Grid>
         </Grid>
       </Box>
-      <DoseOrderCumulativeDosesChart
-        data={convertToDoseOrderCumulativeDosesData(data, limit)}
-        population={orpPopulation}
-      />
+      <Suspense
+        fallback={
+          <Skeleton variant="rect" width="100%" height={300} animation="wave" />
+        }
+      >
+        <DoseOrderCumulativeDosesChart
+          data={convertToDoseOrderCumulativeDosesData(data, limit)}
+          population={orpPopulation}
+        />
+      </Suspense>
     </>
   );
 }

src/components/card/OrpVaccinations/DoseOrderNewDosesChart/DoseOrderNewDosesChartContainer.js

@@ -1,10 +1,13 @@
-import React, { useState } from "react";
+import React, { useState, lazy, Suspense } from "react";
 import PropTypes from "prop-types";
 import { Box, Grid, Typography } from "@material-ui/core";
+import { Skeleton } from "@material-ui/lab";
+
 import { DateLimitSelect } from "../..";
-import DoseOrderNewDosesChart from "./DoseOrderNewDosesChart";
 import { convertToDoseOrderNewDosesData } from "../orpVaccinationsUtils";
 
+const DoseOrderNewDosesChart = lazy(() => import("./DoseOrderNewDosesChart"));
+
 export default function DoseOrderNewDosesChartContainer({ data }) {
   const [limit, setLimit] = useState(90);
   const handleDateLimitChange = ({ select }) => {
@@ -34,9 +37,15 @@ export default function DoseOrderNewDosesChartContainer({ data }) {
           </Grid>
         </Grid>
       </Box>
-      <DoseOrderNewDosesChart
-        data={convertToDoseOrderNewDosesData(data, limit)}
-      />
+      <Suspense
+        fallback={
+          <Skeleton variant="rect" width="100%" height={300} animation="wave" />
+        }
+      >
+        <DoseOrderNewDosesChart
+          data={convertToDoseOrderNewDosesData(data, limit)}
+        />
+      </Suspense>
     </>
   );
 }

src/components/card/OrpVaccinations/VaccineTypesChart/VaccineTypesChartContainer.js

@@ -1,17 +1,27 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import PropTypes from "prop-types";
 import { Typography } from "@material-ui/core";
+import { Skeleton } from "@material-ui/lab";
 
-import VaccineTypesChart from "./VaccineTypesChart";
 import { convertToVaccineTypes } from "../orpVaccinationsUtils";
 
+const VaccineTypesChart = lazy(() => import("./VaccineTypesChart"));
+
 export default function VaccineTypesChartContainer({ vaccines, vaccineNames }) {
   return (
     <>
       <Typography variant="h6">
         Vykázaná očkování celkem dle typu očkovací látky
       </Typography>
-      <VaccineTypesChart data={convertToVaccineTypes(vaccines, vaccineNames)} />
+      <Suspense
+        fallback={
+          <Skeleton variant="rect" width="100%" height={260} animation="wave" />
+        }
+      >
+        <VaccineTypesChart
+          data={convertToVaccineTypes(vaccines, vaccineNames)}
+        />
+      </Suspense>
     </>
   );
 }