perf: load primary/rainbow chart components lazily (#5477)

Co-authored-by: woody <[email protected]>

src/components/Graph/Graph.tsx

@@ -2,12 +2,17 @@ import { Center, Fade } from '@chakra-ui/react'
 import { ParentSize } from '@visx/responsive'
 import type { ParentSizeProvidedProps } from '@visx/responsive/lib/components/ParentSize'
 import { isEmpty } from 'lodash'
-import { useCallback } from 'react'
+import { lazy, Suspense, useCallback } from 'react'
 import type { BalanceChartData } from 'hooks/useBalanceChartData/useBalanceChartData'
 
 import { GraphLoading } from './GraphLoading'
-import { PrimaryChart } from './PrimaryChart/PrimaryChart'
-import { RainbowChart } from './RainbowChart/RainbowChart'
+
+const RainbowChart = lazy(() =>
+  import('./RainbowChart/RainbowChart').then(({ RainbowChart }) => ({ default: RainbowChart })),
+)
+const PrimaryChart = lazy(() =>
+  import('./PrimaryChart/PrimaryChart').then(({ PrimaryChart }) => ({ default: PrimaryChart })),
+)
 
 type GraphProps = {
   data: BalanceChartData
@@ -44,13 +49,15 @@ export const Graph: React.FC<GraphProps> = ({
         </Fade>
       ) : !isEmpty(data) ? (
         isRainbowChart ? (
-          <RainbowChart
-            height={height}
-            width={width}
-            color={color}
-            margin={margin}
-            data={rainbow}
-          />
+          <Suspense fallback={<div />}>
+            <RainbowChart
+              height={height}
+              width={width}
+              color={color}
+              margin={margin}
+              data={rainbow}
+            />
+          </Suspense>
         ) : (
           <PrimaryChart
             height={height}

src/components/Graph/PrimaryChart/PrimaryChart.tsx

@@ -2,15 +2,14 @@ import { useColorModeValue } from '@chakra-ui/color-mode'
 import { Stack as CStack } from '@chakra-ui/react'
 import { useToken } from '@chakra-ui/system'
 import type { HistoryData } from '@shapeshiftoss/types'
-import { LinearGradient } from '@visx/gradient'
-import { ScaleSVG } from '@visx/responsive'
 import { scaleLinear } from '@visx/scale'
-import { AnimatedAreaSeries, AnimatedAxis, Tooltip, XYChart } from '@visx/xychart'
-import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip'
+import type { AxisScale } from '@visx/xychart'
+import type { BaseAreaSeriesProps } from '@visx/xychart/lib/components/series/private/BaseAreaSeries'
+import type { RenderTooltipParams, TooltipProps } from '@visx/xychart/lib/components/Tooltip'
 import type { Numeric } from 'd3-array'
 import { extent, max, min } from 'd3-array'
 import dayjs from 'dayjs'
-import { useCallback, useMemo } from 'react'
+import { lazy, useCallback, useMemo } from 'react'
 import { Amount } from 'components/Amount/Amount'
 import { RawText } from 'components/Text'
 import { useLocaleFormatter } from 'hooks/useLocaleFormatter/useLocaleFormatter'
@@ -21,6 +20,28 @@ import { colors } from 'theme/colors'
 import { MaxPrice } from '../MaxPrice'
 import { MinPrice } from '../MinPrice'
 
+const LinearGradient = lazy(() =>
+  import('@visx/gradient').then(({ LinearGradient }) => ({ default: LinearGradient })),
+)
+const ScaleSVG = lazy(() =>
+  import('@visx/responsive').then(({ ScaleSVG }) => ({ default: ScaleSVG })),
+)
+
+type AnimatedAreaSeriesType = React.ComponentType<
+  BaseAreaSeriesProps<AxisScale, AxisScale, HistoryData>
+>
+const AnimatedAreaSeries = lazy<AnimatedAreaSeriesType>(() =>
+  import('@visx/xychart').then(({ AnimatedAreaSeries }) => ({ default: AnimatedAreaSeries })),
+)
+const AnimatedAxis = lazy(() =>
+  import('@visx/xychart').then(({ AnimatedAxis }) => ({ default: AnimatedAxis })),
+)
+type TooltipType = React.ComponentType<TooltipProps<HistoryData>>
+const Tooltip = lazy<TooltipType>(() =>
+  import('@visx/xychart').then(({ Tooltip }) => ({ default: Tooltip })),
+)
+const XYChart = lazy(() => import('@visx/xychart').then(({ XYChart }) => ({ default: XYChart })))
+
 export interface PrimaryChartProps {
   data: HistoryData[]
   width: number