perf: add code-splitting to reduce initial page size

Author: jamaljsr

app/src/Routes.tsx

@@ -1,30 +1,36 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Route, Router, Switch } from 'react-router';
 import { useStore } from 'store';
-import AuthPage from 'components/auth/AuthPage';
-import HistoryPage from 'components/history/HistoryPage';
+import Loading from 'components/common/Loading';
 import { Layout } from 'components/layout';
-import LoopPage from 'components/loop/LoopPage';
-import SettingsPage from 'components/settings/SettingsPage';
+
+const LazyAuthPage = React.lazy(() => import('components/auth/AuthPage'));
+const LazyLoopPage = React.lazy(() => import('components/loop/LoopPage'));
+const LazyHistoryPage = React.lazy(() => import('components/history/HistoryPage'));
+const LazySettingsPage = React.lazy(() => import('components/settings/SettingsPage'));
 
 const Routes: React.FC = () => {
   const { router } = useStore();
 
   return (
-    <Router history={router.history}>
-      <Switch>
-        <Route path="/" exact component={AuthPage} />
-        <Route>
-          <Layout>
-            <Switch>
-              <Route path="/loop" component={LoopPage} />
-              <Route path="/history" component={HistoryPage} />
-              <Route path="/settings" component={SettingsPage} />
-            </Switch>
-          </Layout>
-        </Route>
-      </Switch>
-    </Router>
+    <Suspense fallback={<Loading delay={500} />}>
+      <Router history={router.history}>
+        <Switch>
+          <Route path="/" exact component={LazyAuthPage} />
+          <Route>
+            <Layout>
+              <Switch>
+                <Suspense fallback={<Loading delay={500} />}>
+                  <Route path="/loop" component={LazyLoopPage} />
+                  <Route path="/history" component={LazyHistoryPage} />
+                  <Route path="/settings" component={LazySettingsPage} />
+                </Suspense>
+              </Switch>
+            </Layout>
+          </Route>
+        </Switch>
+      </Router>
+    </Suspense>
   );
 };
 

app/src/__tests__/Routes.spec.tsx

@@ -11,29 +11,29 @@ describe('Routes Component', () => {
   };
 
   it('should display the Auth page by default', async () => {
-    const { getByText, store } = await render();
-    expect(getByText('Shushtar')).toBeInTheDocument();
+    const { findByText, store } = await render();
+    expect(await findByText('Shushtar')).toBeInTheDocument();
     expect(store.router.location.pathname).toBe('/');
   });
 
   it('should display the Loop page', async () => {
-    const { getAllByText, store } = await render();
+    const { findByText, store } = await render();
     store.uiStore.goToLoop();
-    expect(getAllByText('Lightning Loop')).toHaveLength(2);
+    expect(await findByText('Total Outbound Liquidity')).toBeInTheDocument();
     expect(store.router.location.pathname).toBe('/loop');
   });
 
   it('should display the History page', async () => {
-    const { getByText, store } = await render();
+    const { findByText, store } = await render();
     store.uiStore.goToHistory();
-    expect(getByText('Loop History')).toBeInTheDocument();
+    expect(await findByText('Loop History')).toBeInTheDocument();
     expect(store.router.location.pathname).toBe('/history');
   });
 
   it('should display the Settings page', async () => {
-    const { getAllByText, store } = await render();
+    const { findByText, store } = await render();
     store.uiStore.goToSettings();
-    expect(getAllByText('Settings')).toHaveLength(2);
+    expect(await findByText('My Node')).toBeInTheDocument();
     expect(store.router.location.pathname).toBe('/settings');
   });
 });

app/src/__tests__/components/loop/LoopPage.spec.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { SwapStatus } from 'types/generated/loop_pb';
 import { grpc } from '@improbable-eng/grpc-web';
 import { fireEvent, waitFor } from '@testing-library/react';
@@ -21,7 +21,12 @@ describe('LoopPage component', () => {
   });
 
   const render = () => {
-    return renderWithProviders(<LoopPage />, store);
+    const cmp = (
+      <Suspense fallback={null}>
+        <LoopPage />
+      </Suspense>
+    );
+    return renderWithProviders(cmp, store);
   };
 
   it('should display the page title', () => {
@@ -90,14 +95,14 @@ describe('LoopPage component', () => {
     });
 
     it('should display swap wizard when Loop out is clicked', async () => {
-      const { getByText } = render();
+      const { getByText, findByText } = render();
       expect(getByText('Loop')).toBeInTheDocument();
       fireEvent.click(getByText('Loop'));
       store.channelStore.sortedChannels.slice(0, 3).forEach(c => {
         store.buildSwapStore.toggleSelectedChannel(c.chanId);
       });
       fireEvent.click(getByText('Loop Out'));
-      expect(getByText('Step 1 of 2')).toBeInTheDocument();
+      expect(await findByText('Step 1 of 2')).toBeInTheDocument();
     });
 
     it('should display the swap wizard when Loop in is clicked', async () => {

app/src/components/common/Loading.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import loadingJson from 'assets/animations/loading.json';
+import { HeaderFour } from 'components/base';
+import Animation from 'components/common/Animation';
+import { styled } from 'components/theme';
+
+const Styled = {
+  Wrapper: styled.div`
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  `,
+  Loader: styled(Animation)`
+    width: 150px;
+    height: 150px;
+  `,
+  Message: styled.div`
+    text-align: center;
+  `,
+};
+
+interface Props {
+  message?: string;
+  delay?: number;
+}
+
+const Loading: React.FC<Props> = ({ message, delay }) => {
+  const [show, setShow] = useState(!delay);
+
+  useEffect(() => {
+    if (delay) {
+      const timeout = setTimeout(() => setShow(true), delay);
+      return () => clearTimeout(timeout);
+    }
+  }, [delay]);
+
+  const { Wrapper, Loader, Message } = Styled;
+  return show ? (
+    <Wrapper>
+      <Loader animationData={loadingJson} loop />
+      {message && (
+        <Message>
+          <HeaderFour>{message}</HeaderFour>
+        </Message>
+      )}
+    </Wrapper>
+  ) : null;
+};
+
+export default observer(Loading);

app/src/components/loop/LoopPage.tsx

@@ -8,8 +8,9 @@ import { styled } from 'components/theme';
 import ChannelList from './ChannelList';
 import LoopActions from './LoopActions';
 import LoopTiles from './LoopTiles';
-import ProcessingSwaps from './processing/ProcessingSwaps';
-import SwapWizard from './swap/SwapWizard';
+
+const LazySwapWizard = React.lazy(() => import('./swap/SwapWizard'));
+const LazyProcessingSwaps = React.lazy(() => import('./processing/ProcessingSwaps'));
 
 const Styled = {
   PageWrap: styled.div`
@@ -36,9 +37,9 @@ const LoopPage: React.FC = () => {
   return (
     <PageWrap>
       {uiStore.processingSwapsVisible ? (
-        <ProcessingSwaps />
+        <LazyProcessingSwaps />
       ) : buildSwapStore.showWizard ? (
-        <SwapWizard />
+        <LazySwapWizard />
       ) : (
         <>
           <PageHeader title={title} onExportClick={channelStore.exportChannels} />

app/src/components/loop/swap/SwapProcessing.tsx

@@ -1,40 +1,12 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import loadingJson from 'assets/animations/loading.json';
 import { usePrefixedTranslation } from 'hooks';
-import { HeaderFour } from 'components/base';
-import Animation from 'components/common/Animation';
-import { styled } from 'components/theme';
-
-const Styled = {
-  Wrapper: styled.div`
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  `,
-  Loader: styled(Animation)`
-    width: 150px;
-    height: 150px;
-  `,
-  LoadingMessage: styled.div`
-    text-align: center;
-  `,
-};
+import Loading from 'components/common/Loading';
 
 const SwapProcessingStep: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.loop.swap.SwapProcessingStep');
 
-  const { Wrapper, Loader, LoadingMessage } = Styled;
-  return (
-    <Wrapper>
-      <Loader animationData={loadingJson} loop />
-      <LoadingMessage>
-        <HeaderFour>{l('loadingMsg')}</HeaderFour>
-      </LoadingMessage>
-    </Wrapper>
-  );
+  return <Loading message={l('loadingMsg')} />;
 };
 
 export default observer(SwapProcessingStep);