feat(cra-template-seed): add route based code splitting and lazy loading of edit component (#961)

Author: LuisValgoi

packages/cra-template-seed/template/src/pages/Todo/Edit/TodoEdit.js

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { Suspense, lazy } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTodo } from '../../../hooks/services/useTodos';
 
-import { Spinner } from '@ui5/webcomponents-react/lib/Spinner';
+import { BusyIndicator } from '@ui5/webcomponents-react/lib/BusyIndicator';
 import NavBack from '../../../components/NavBack/NavBack';
 import CenteredContent from '../../../components/Layout/CenteredContent';
-import TodoEditForm from './TodoEditForm';
+
+const TodoEditForm = lazy(() => import('./TodoEditForm'));
 
 const onSubmitEditForm = (values, actions) => {
   actions.setSubmitting(true);
@@ -24,8 +25,13 @@ const TodoEdit = ({ match }) => {
       <NavBack />
       <CenteredContent>
         <br />
-        {isLoading && <Spinner />}
-        {isSuccess && <TodoEditForm data={data.data.todos} onSubmitHandler={onSubmitEditForm} />}
+        {isLoading && <BusyIndicator active />}
+
+        {isSuccess && (
+          <Suspense fallback={<BusyIndicator active />}>
+            <TodoEditForm data={data.data.todos} onSubmitHandler={onSubmitEditForm} />
+          </Suspense>
+        )}
       </CenteredContent>
     </>
   );

packages/cra-template-seed/template/src/pages/Todo/List/TodoList.js

@@ -9,8 +9,8 @@ import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 import { Text } from '@ui5/webcomponents-react/lib/Text';
 import { getUrl } from '../../../util/browser/BrowserProvider';
 import ComponentWithAuthorizationRestriction from '../../../auth/ComponentWithAuthorizationRestriction';
-import TodoListPaginatedItems from './TodoListPaginatedItems';
 import CenteredContent from '../../../components/Layout/CenteredContent';
+import TodoListPaginatedItems from './TodoListPaginatedItems';
 
 const TodoList = () => {
   const history = useHistory();
@@ -54,7 +54,7 @@ const TodoList = () => {
         <Text>{isIE() ? 'This Text is rendered only for IE' : 'This Text is rendered only when is NOT IE'}</Text>
       </p>
 
-      <Title level={TitleLevel.H3}>Pagination + Edition (Formik and Yup)</Title>
+      <Title level={TitleLevel.H3}>Lazy Loading + Pagination + Edition (Formik and Yup)</Title>
       <br />
       <TodoListPaginatedItems />
     </CenteredContent>

packages/cra-template-seed/template/src/pages/Todo/List/TodoListPaginatedItems.js

@@ -4,7 +4,7 @@ import { useTodos } from '../../../hooks/services/useTodos';
 
 import { List } from '@ui5/webcomponents-react/lib/List';
 import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem';
-import { Spinner } from '@ui5/webcomponents-react/lib/Spinner';
+import { BusyIndicator } from '@ui5/webcomponents-react/lib/BusyIndicator';
 import { Title } from '@ui5/webcomponents-react/lib/Title';
 import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 import { Pagination } from '../../../components/Pagination/Pagination';
@@ -23,7 +23,7 @@ const TodoListPaginatedItems = () => {
   return (
     <div>
       {isLoading ? (
-        <Spinner />
+        <BusyIndicator active />
       ) : (
         <>
           <Title level={TitleLevel.H5}>{`Records (${resolvedData.numberOfElements} / ${resolvedData.totalElements})`}</Title>

packages/cra-template-seed/template/src/routes/Routes.js

@@ -1,23 +1,27 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import { Route, Switch, Redirect } from 'react-router-dom';
 import { getUrl } from '../util/browser/BrowserProvider';
 
+import { BusyIndicator } from '@ui5/webcomponents-react/lib/BusyIndicator';
 import RouteWithAuthorizationRestriction from '../auth/RouteWithAuthorizationRestriction';
-import TodoList from '../pages/Todo/List/TodoList';
-import TodoEdit from '../pages/Todo/Edit/TodoEdit';
-import NotFound from '../pages/Fallback/NotFound';
-import Buggy from '../pages/Fallback/Buggy';
+
+const TodoList = lazy(() => import('../pages/Todo/List/TodoList'));
+const TodoEdit = lazy(() => import('../pages/Todo/Edit/TodoEdit'));
+const NotFound = lazy(() => import('../pages/Fallback/NotFound'));
+const Buggy = lazy(() => import('../pages/Fallback/Buggy'));
 
 const Routes = () => {
   return (
-    <Switch>
-      <Redirect path={getUrl('HOME')} exact to={getUrl('TODO_LIST')} />
-      <RouteWithAuthorizationRestriction allowedAuthorities={['canAccessTodoListPage']} authorityKey="permissions" path={getUrl('TODO_LIST')} component={TodoList} />
-      <RouteWithAuthorizationRestriction allowedAuthorities={['canAccessTodoEditPage']} authorityKey="permissions" path={getUrl('TODO_EDIT')} component={TodoEdit} />
-      <Route path={getUrl('BUGGY')} exact component={Buggy} />
-      <Route path={getUrl('NOT_FOUND')} exact component={NotFound} />
-      <Route path={getUrl('ANY')} component={NotFound} />
-    </Switch>
+    <Suspense fallback={<BusyIndicator active />}>
+      <Switch>
+        <Redirect path={getUrl('HOME')} exact to={getUrl('TODO_LIST')} />
+        <RouteWithAuthorizationRestriction allowedAuthorities={['canAccessTodoListPage']} authorityKey="permissions" path={getUrl('TODO_LIST')} component={TodoList} />
+        <RouteWithAuthorizationRestriction allowedAuthorities={['canAccessTodoEditPage']} authorityKey="permissions" path={getUrl('TODO_EDIT')} component={TodoEdit} />
+        <Route path={getUrl('BUGGY')} exact component={Buggy} />
+        <Route path={getUrl('NOT_FOUND')} exact component={NotFound} />
+        <Route path={getUrl('ANY')} component={NotFound} />
+      </Switch>
+    </Suspense>
   );
 };