Lazy load chart

Author: djhi

examples/demo/src/dashboard/Dashboard.tsx

@@ -1,6 +1,13 @@
-import React, { useMemo, CSSProperties } from 'react';
-import { useGetList } from 'react-admin';
-import { useMediaQuery, Theme } from '@mui/material';
+import React, { useMemo, CSSProperties, Suspense } from 'react';
+import { Translate, useGetList } from 'react-admin';
+import {
+    useMediaQuery,
+    Theme,
+    Skeleton,
+    Card,
+    CardHeader,
+    CardContent,
+} from '@mui/material';
 import { subDays, startOfDay } from 'date-fns';
 
 import Welcome from './Welcome';
@@ -9,7 +16,6 @@ import NbNewOrders from './NbNewOrders';
 import PendingOrders from './PendingOrders';
 import PendingReviews from './PendingReviews';
 import NewCustomers from './NewCustomers';
-import OrderChart from './OrderChart';
 
 import { Order } from '../types';
 
@@ -37,6 +43,8 @@ const styles = {
 const Spacer = () => <span style={{ width: '1em' }} />;
 const VerticalSpacer = () => <span style={{ height: '1em' }} />;
 
+const OrderChart = React.lazy(() => import('./OrderChart'));
+
 const Dashboard = () => {
     const isXSmall = useMediaQuery((theme: Theme) =>
         theme.breakpoints.down('sm')
@@ -109,7 +117,18 @@ const Dashboard = () => {
                 <NbNewOrders value={nbNewOrders} />
             </div>
             <div style={styles.singleCol}>
-                <OrderChart orders={recentOrders} />
+                <Card>
+                    <CardHeader
+                        title={
+                            <Translate i18nKey="pos.dashboard.month_history" />
+                        }
+                    />
+                    <CardContent>
+                        <Suspense fallback={<Skeleton height={300} />}>
+                            <OrderChart orders={recentOrders} />
+                        </Suspense>
+                    </CardContent>
+                </Card>
             </div>
             <div style={styles.singleCol}>
                 <PendingOrders orders={pendingOrders} />
@@ -126,7 +145,18 @@ const Dashboard = () => {
                         <NbNewOrders value={nbNewOrders} />
                     </div>
                     <div style={styles.singleCol}>
-                        <OrderChart orders={recentOrders} />
+                        <Card>
+                            <CardHeader
+                                title={
+                                    <Translate i18nKey="pos.dashboard.month_history" />
+                                }
+                            />
+                            <CardContent>
+                                <Suspense fallback={<Skeleton height={300} />}>
+                                    <OrderChart orders={recentOrders} />
+                                </Suspense>
+                            </CardContent>
+                        </Card>
                     </div>
                     <div style={styles.singleCol}>
                         <PendingOrders orders={pendingOrders} />

examples/demo/src/dashboard/OrderChart.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Card, CardHeader, CardContent } from '@mui/material';
 import * as echarts from 'echarts/core';
 // Import bar charts, all suffixed with Chart
 import { LineChart } from 'echarts/charts';
@@ -12,7 +11,6 @@ import {
     DatasetComponent,
     TransformComponent,
 } from 'echarts/components';
-import { useTranslate } from 'react-admin';
 // Features like Universal Transition and Label Layout
 import { LabelLayout, UniversalTransition } from 'echarts/features';
 
@@ -84,7 +82,6 @@ const getRevenuePerDay = (orders: Order[]): TotalByDay[] => {
 
 const OrderChart = (props: { orders?: Order[] }) => {
     const { orders } = props;
-    const translate = useTranslate();
     const chartRef = React.useRef<HTMLDivElement>(null);
     const chartInstance = React.useRef<echarts.ECharts | null>(null);
 
@@ -201,14 +198,7 @@ const OrderChart = (props: { orders?: Order[] }) => {
         };
     }, [orders]);
 
-    return (
-        <Card>
-            <CardHeader title={translate('pos.dashboard.month_history')} />
-            <CardContent>
-                <div ref={chartRef} style={{ width: '100%', height: 300 }} />
-            </CardContent>
-        </Card>
-    );
+    return <div ref={chartRef} style={{ width: '100%', height: 300 }} />;
 };
 
 interface TotalByDay {