From 0d5f55a70683c723c0d2ac30df33c14fd4baa1b6 Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Tue, 2 Aug 2022 10:23:55 +0200
Subject: [PATCH] refactor: lazy-load the charting library (#1184)

---
 .../FeatureMetricsChart/FeatureMetricsChart.tsx      |  3 +++
 .../FeatureMetricsContent/FeatureMetricsContent.tsx  | 12 ++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx
index 45d7e6d59b..db8b7ab320 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx
@@ -67,3 +67,6 @@ ChartJS.register(
     Tooltip,
     Title
 );
+
+// Use a default export to lazy-load the charting library.
+export default FeatureMetricsChart;
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx
index cf2ce958d9..2c3ffe64ee 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx
@@ -1,10 +1,10 @@
 import { FeatureMetricsTable } from '../FeatureMetricsTable/FeatureMetricsTable';
 import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
 import { FeatureMetricsStatsRaw } from '../FeatureMetricsStats/FeatureMetricsStatsRaw';
-import { FeatureMetricsChart } from '../FeatureMetricsChart/FeatureMetricsChart';
 import { Box, Typography } from '@mui/material';
 import theme from 'themes/theme';
 import { useId } from 'hooks/useId';
+import React, { Suspense } from 'react';
 
 interface IFeatureMetricsContentProps {
     metrics: IFeatureMetricsRaw[];
@@ -34,14 +34,14 @@ export const FeatureMetricsContent = ({
     }
 
     return (
-        <>
+        <Suspense fallback={null}>
             <Box
                 borderTop={1}
                 pt={2}
                 mt={3}
                 borderColor={theme.palette.grey[200]}
             >
-                <FeatureMetricsChart
+                <LazyFeatureMetricsChart
                     metrics={metrics}
                     hoursBack={hoursBack}
                     statsSectionId={statsSectionId}
@@ -61,6 +61,10 @@ export const FeatureMetricsContent = ({
                     tableSectionId={tableSectionId}
                 />
             </Box>
-        </>
+        </Suspense>
     );
 };
+
+const LazyFeatureMetricsChart = React.lazy(
+    () => import('../FeatureMetricsChart/FeatureMetricsChart')
+);