feat: optimize bundle size and loading (#1406)

.gitignore

@@ -18,6 +18,7 @@ yarn-error.log
 *.launch
 .settings/
 *.sublime-workspace
+bundleStats.html
 # IDE - VSCode
 .vscode/*
 !.vscode/settings.json

package.json

@@ -159,6 +159,7 @@
     "reg-publish-s3-plugin": "^0.12.2",
     "reg-suit": "^0.12.2",
     "rimraf": "^5.0.1",
+    "rollup-plugin-visualizer": "^5.9.2",
     "semantic-release": "^21.1.1",
     "storybook": "7.2.1",
     "stylelint": "^15.10.3",

src/App/Router/PageSuspense/index.tsx

@@ -0,0 +1,12 @@
+import { Spinner } from 'components';
+import React, { Suspense } from 'react';
+
+export interface PageSuspenseProps {
+  children: React.ReactNode;
+}
+
+const PageSuspense: React.FC<PageSuspenseProps> = ({ children }) => (
+  <Suspense fallback={<Spinner />}>{children}</Suspense>
+);
+
+export default PageSuspense;

src/App/Router/index.tsx

@@ -1,25 +1,30 @@
-import React, { useEffect } from 'react';
+import React, { lazy, useEffect } from 'react';
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { isFeatureEnabled } from 'utilities';
 
 import 'assets/styles/App.scss';
 import { routes } from 'constants/routing';
 import { useAuth } from 'context/AuthContext';
-import Account from 'pages/Account';
-import ConvertVrt from 'pages/ConvertVrt';
-import Dashboard from 'pages/Dashboard';
-import Vote from 'pages/Governance';
-import History from 'pages/History';
-import IsolatedPools from 'pages/IsolatedPools';
-import { CorePoolMarket, IsolatedPoolMarket } from 'pages/Market';
-import { CorePool, IsolatedPool } from 'pages/Pool';
-import Proposal from 'pages/Proposal';
-import Swap from 'pages/Swap';
-import Vai from 'pages/Vai';
-import Vaults from 'pages/Vault';
-import Voter from 'pages/Voter';
-import VoterLeaderboard from 'pages/VoterLeaderboard';
-import Xvs from 'pages/Xvs';
+
+import PageSuspense from './PageSuspense';
+
+const Dashboard = lazy(() => import('pages/Dashboard'));
+const Account = lazy(() => import('pages/Account'));
+const CorePoolMarket = lazy(() => import('pages/Market/CorePoolMarket'));
+const IsolatedPoolMarket = lazy(() => import('pages/Market/IsolatedPoolMarket'));
+const CorePool = lazy(() => import('pages/Pool/CorePool'));
+const IsolatedPool = lazy(() => import('pages/Pool/IsolatedPool'));
+const ConvertVrt = lazy(() => import('pages/ConvertVrt'));
+const Governance = lazy(() => import('pages/Governance'));
+const History = lazy(() => import('pages/History'));
+const IsolatedPools = lazy(() => import('pages/IsolatedPools'));
+const Proposal = lazy(() => import('pages/Proposal'));
+const Swap = lazy(() => import('pages/Swap'));
+const Vai = lazy(() => import('pages/Vai'));
+const Vaults = lazy(() => import('pages/Vault'));
+const Voter = lazy(() => import('pages/Voter'));
+const VoterLeaderboard = lazy(() => import('pages/VoterLeaderboard'));
+const Xvs = lazy(() => import('pages/Xvs'));
 
 const Router = () => {
   const { accountAddress } = useAuth();
@@ -41,46 +46,174 @@ const Router = () => {
 
   return (
     <Routes>
-      <Route path={routes.dashboard.path} element={<Dashboard />} />
-
-      {!!accountAddress && <Route path={routes.account.path} element={<Account />} />}
+      <Route
+        path={routes.dashboard.path}
+        element={
+          <PageSuspense>
+            <Dashboard />
+          </PageSuspense>
+        }
+      />
+
+      {!!accountAddress && (
+        <Route
+          path={routes.account.path}
+          element={
+            <PageSuspense>
+              <Account />
+            </PageSuspense>
+          }
+        />
+      )}
 
       {isFeatureEnabled('isolatedPools') && (
-        <Route path={routes.isolatedPools.path} element={<IsolatedPools />} />
+        <Route
+          path={routes.isolatedPools.path}
+          element={
+            <PageSuspense>
+              <IsolatedPools />
+            </PageSuspense>
+          }
+        />
       )}
 
       {isFeatureEnabled('isolatedPools') && (
-        <Route path={routes.isolatedPool.path} element={<IsolatedPool />} />
+        <Route
+          path={routes.isolatedPool.path}
+          element={
+            <PageSuspense>
+              <IsolatedPool />
+            </PageSuspense>
+          }
+        />
       )}
 
       {isFeatureEnabled('isolatedPools') && (
-        <Route path={routes.isolatedPoolMarket.path} element={<IsolatedPoolMarket />} />
+        <Route
+          path={routes.isolatedPoolMarket.path}
+          element={
+            <PageSuspense>
+              <IsolatedPoolMarket />
+            </PageSuspense>
+          }
+        />
       )}
 
-      <Route path={routes.corePool.path} element={<CorePool />} />
-      <Route path={routes.corePoolMarket.path} element={<CorePoolMarket />} />
-
-      <Route path={routes.vaults.path} element={<Vaults />} />
-
-      <Route path={routes.history.path} element={<History />} />
+      <Route
+        path={routes.corePool.path}
+        element={
+          <PageSuspense>
+            <CorePool />
+          </PageSuspense>
+        }
+      />
+      <Route
+        path={routes.corePoolMarket.path}
+        element={
+          <PageSuspense>
+            <CorePoolMarket />
+          </PageSuspense>
+        }
+      />
+
+      <Route
+        path={routes.vaults.path}
+        element={
+          <PageSuspense>
+            <Vaults />
+          </PageSuspense>
+        }
+      />
+
+      <Route
+        path={routes.history.path}
+        element={
+          <PageSuspense>
+            <History />
+          </PageSuspense>
+        }
+      />
 
       {/* suffix with a /* to make it accept nested routes */}
-      <Route path={`${routes.governance.path}/*`} element={<Vote />} />
-
-      <Route path={routes.governanceLeaderBoard.path} element={<VoterLeaderboard />} />
-      <Route path={routes.governanceVoter.path} element={<Voter />} />
-      <Route path={routes.governanceProposal.path} element={<Proposal />} />
-
-      <Route path={routes.xvs.path} element={<Xvs />} />
-
-      <Route path={routes.convertVrt.path} element={<ConvertVrt />} />
-
-      <Route path={routes.swap.path} element={<Swap />} />
-
-      <Route path={routes.vai.path} element={<Vai />} />
+      <Route
+        path={`${routes.governance.path}/*`}
+        element={
+          <PageSuspense>
+            <Governance />
+          </PageSuspense>
+        }
+      />
+
+      <Route
+        path={routes.governanceLeaderBoard.path}
+        element={
+          <PageSuspense>
+            <VoterLeaderboard />
+          </PageSuspense>
+        }
+      />
+      <Route
+        path={routes.governanceVoter.path}
+        element={
+          <PageSuspense>
+            <Voter />
+          </PageSuspense>
+        }
+      />
+      <Route
+        path={routes.governanceProposal.path}
+        element={
+          <PageSuspense>
+            <Proposal />
+          </PageSuspense>
+        }
+      />
+
+      <Route
+        path={routes.xvs.path}
+        element={
+          <PageSuspense>
+            <Xvs />
+          </PageSuspense>
+        }
+      />
+
+      <Route
+        path={routes.convertVrt.path}
+        element={
+          <PageSuspense>
+            <ConvertVrt />
+          </PageSuspense>
+        }
+      />
+
+      <Route
+        path={routes.swap.path}
+        element={
+          <PageSuspense>
+            <Swap />
+          </PageSuspense>
+        }
+      />
+
+      <Route
+        path={routes.vai.path}
+        element={
+          <PageSuspense>
+            <Vai />
+          </PageSuspense>
+        }
+      />
 
       {/* redirect to the dashboard if no route matches */}
-      <Route path="*" element={<Dashboard />} />
+      <Route
+        path="*"
+        element={
+          <PageSuspense>
+            <Dashboard />
+          </PageSuspense>
+        }
+      />
     </Routes>
   );
 };

src/components/index.ts

@@ -3,8 +3,6 @@ export * from './ActiveVotingProgress';
 export * from './TokenAnnouncement';
 export * from './ButtonGroup';
 export * from './ReadableActionSignature';
-export * from './charts/ApyChart';
-export * from './charts/InterestRateChart';
 export * from './AuthModal';
 export * from './Button';
 export * from './BscLink';

src/pages/Dashboard/ConnectWalletBanner/styles.ts

@@ -57,24 +57,24 @@ export const useStyles = () => {
     illustration: css`
       position: absolute;
       height: ${theme.spacing(125)};
-      top: ${theme.spacing(-17)};
-      right: ${theme.spacing(-12)};
+      top: ${theme.spacing(-15)};
+      right: ${theme.spacing(6)};
 
       ${theme.breakpoints.down('xl')} {
-        right: ${theme.spacing(-24)};
+        right: ${theme.spacing(-6)};
       }
 
       ${theme.breakpoints.down('lg')} {
-        right: ${theme.spacing(-68)};
+        right: ${theme.spacing(-50)};
       }
 
       ${theme.breakpoints.down('sm')} {
         height: auto;
-        width: ${theme.spacing(102)};
-        top: ${theme.spacing(-8)};
+        width: ${theme.spacing(84)};
+        top: ${theme.spacing(-7)};
         left: auto;
         right: 50%;
-        margin-right: ${theme.spacing(-57)};
+        margin-right: ${theme.spacing(-46)};
       }
     `,
   };

src/pages/Governance/ProposalList/index.tsx

@@ -3,7 +3,7 @@ import { Typography } from '@mui/material';
 import { InfoIcon, Pagination, Spinner, TextButton } from 'components';
 import { ContractReceipt } from 'ethers';
 import React, { useState } from 'react';
-import { useNavigate, useParams } from 'react-router';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'translation';
 import { Proposal } from 'types';
 

src/pages/Governance/index.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, waitFor } from '@testing-library/react';
 import BigNumber from 'bignumber.js';
-import { cloneDeep } from 'lodash';
+import _cloneDeep from 'lodash/cloneDeep';
 import React from 'react';
 import Vi from 'vitest';
 
@@ -136,7 +136,7 @@ describe('pages/Governance', () => {
   });
 
   it('prompts user to deposit XVS', async () => {
-    const vaultsCopy = cloneDeep(vaults);
+    const vaultsCopy = _cloneDeep(vaults);
     vaultsCopy[1].userStakedWei = new BigNumber(0);
     (getCurrentVotes as Vi.Mock).mockImplementationOnce(() => ({ votesWei: new BigNumber(0) }));
     (useGetVestingVaults as Vi.Mock).mockImplementationOnce(() => ({

src/pages/History/Filters/index.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
-import noop from 'lodash';
+import noop from 'noop-ts';
 import React from 'react';
 
 import Filters, { ALL_VALUE } from '.';

src/pages/Market/CorePoolMarket/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`pages/Market/CorePoolMarket > fetches market details and displays them correctly 1`] = `"Supply infoSupply APYTotal supply$2.78MAPY0.05%Distribution APY0.11%"`;
+
+exports[`pages/Market/CorePoolMarket > fetches market details and displays them correctly 2`] = `"Borrow infoBorrow APYTotal borrow$709.25KAPY-2.3%Distribution APY4.17%"`;
+
+exports[`pages/Market/CorePoolMarket > fetches market details and displays them correctly 3`] = `"Interest Rate ModelUtilization rateBorrow APYSupply APY"`;
+
+exports[`pages/Market/CorePoolMarket > fetches market details and displays them correctly 4`] = `"Market infoPrice$1.278673Market liquidity$80.36M# of suppliers100# of borrowers10Supply capUncappedBorrow capUncappedDaily supplying interests$81.31KDaily borrowing interests$2.04KDaily XVS distributed19.99MReserves1.00K XVSReserve factor25%Collateral factor50%vXVS minted> 100.00TExchange rate1 XVS=49.589181 vXVS"`;