Merge pull request #9255 from marmelab/demo-lazy

[Demo] Add lazy loading to CRM demo to illustrate code splitting

Author: djhi

examples/crm/src/Layout.tsx

@@ -1,9 +1,9 @@
-import React, { HtmlHTMLAttributes } from 'react';
+import React, { Suspense, HtmlHTMLAttributes } from 'react';
 import { CssBaseline, Container } from '@mui/material';
 import { CoreLayoutProps, CheckForApplicationUpdate } from 'react-admin';
 import { ErrorBoundary } from 'react-error-boundary';
 
-import { Error } from 'react-admin';
+import { Error, Loading } from 'react-admin';
 import Header from './Header';
 
 const Layout = ({ children }: LayoutProps) => (
@@ -14,7 +14,7 @@ const Layout = ({ children }: LayoutProps) => (
             <main id="main-content">
                 {/* @ts-ignore */}
                 <ErrorBoundary FallbackComponent={Error}>
-                    {children}
+                    <Suspense fallback={<Loading />}>{children}</Suspense>
                 </ErrorBoundary>
             </main>
         </Container>

examples/crm/src/deals/DealList.tsx

@@ -17,7 +17,7 @@ import { DealShow } from './DealShow';
 import { OnlyMineInput } from './OnlyMineInput';
 import { typeChoices } from './types';
 
-export const DealList = () => {
+const DealList = () => {
     const { identity } = useGetIdentity();
     const location = useLocation();
     const matchCreate = matchPath('/deals/create', location.pathname);
@@ -61,3 +61,5 @@ const DealActions = () => {
         </TopToolbar>
     );
 };
+
+export default DealList;

examples/crm/src/deals/index.ts

@@ -1,5 +1,6 @@
 /* eslint-disable import/no-anonymous-default-export */
-import { DealList } from './DealList';
+import * as React from 'react';
+const DealList = React.lazy(() => import('./DealList'));
 
 export default {
     list: DealList,