Lazy load Transactions lists for faster UI rendering

Author: ShahanaFarooqui

apps/frontend/src/components/cln/BTCWallet/BTCWallet.tsx

@@ -1,13 +1,15 @@
 import './BTCWallet.scss';
+import { lazy, Suspense } from 'react';
 import PerfectScrollbar from 'react-perfect-scrollbar';
 import { Spinner, Alert, Card, Col, ButtonGroup } from 'react-bootstrap';
+const BTCTransactionsList = lazy(() => import('../BTCTransactionsList/BTCTransactionsList'));
 import { BitcoinWalletSVG } from '../../../svgs/BitcoinWallet';
 import { WithdrawSVG } from '../../../svgs/Withdraw';
 import { DepositSVG } from '../../../svgs/Deposit';
 import CurrencyBox from '../../shared/CurrencyBox/CurrencyBox';
-import BTCTransactionsList from '../BTCTransactionsList/BTCTransactionsList';
 import { useSelector } from 'react-redux';
 import { selectIsAuthenticated, selectWalletBalances } from '../../../store/rootSelectors';
+import { Loading } from '../../ui/Loading/Loading';
 
 const BTCWallet = (props) => {
   const isAuthenticated = useSelector(selectIsAuthenticated);
@@ -52,9 +54,11 @@ const BTCWallet = (props) => {
         </Card>
         <Card.Body className="px-4 list-scroll-container">
           <div className="text-light btc-transactions-tabs">Transactions</div>
-          <PerfectScrollbar>
-            <BTCTransactionsList />
-          </PerfectScrollbar>
+          <Suspense fallback={<Loading />}>
+            <PerfectScrollbar>
+              <BTCTransactionsList />
+            </PerfectScrollbar>
+          </Suspense>
         </Card.Body>
       </Card.Body>
     </Card>

apps/frontend/src/components/cln/CLNWallet/CLNWallet.tsx

@@ -1,18 +1,18 @@
 import './CLNWallet.scss';
-import { useState } from 'react';
+import { useState, lazy, Suspense } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import PerfectScrollbar from 'react-perfect-scrollbar';
 import { Card, Col, ButtonGroup, Spinner, Alert, Tab, Nav } from 'react-bootstrap';
-
+const CLNTransactionsList = lazy(() => import('../CLNTransactionsList/CLNTransactionsList'));
+const CLNOffersList = lazy(() => import('../CLNOffersList/CLNOffersList'));
 import { LightningWalletSVG } from '../../../svgs/LightningWallet';
 import { WithdrawSVG } from '../../../svgs/Withdraw';
 import { DepositSVG } from '../../../svgs/Deposit';
-import CLNTransactionsList from '../CLNTransactionsList/CLNTransactionsList';
 import CurrencyBox from '../../shared/CurrencyBox/CurrencyBox';
 import { TRANSITION_DURATION } from '../../../utilities/constants';
-import CLNOffersList from '../CLNOffersList/CLNOffersList';
 import { useSelector } from 'react-redux';
 import { selectIsAuthenticated, selectWalletBalances } from '../../../store/rootSelectors';
+import { Loading } from '../../ui/Loading/Loading';
 
 const CLNWallet = (props) => {
   const isAuthenticated = useSelector(selectIsAuthenticated);
@@ -85,10 +85,14 @@ const CLNWallet = (props) => {
                 >
                   <Tab.Content className="h-100 d-flex flex-column">
                     <Tab.Pane className="h-100 list-scroll-container" eventKey="transactions">
-                      <CLNTransactionsList />
+                      <Suspense fallback={<Loading />}>
+                        <CLNTransactionsList />
+                      </Suspense>
                     </Tab.Pane>
                     <Tab.Pane eventKey="offers">
-                      <CLNOffersList />
+                      <Suspense fallback={<Loading />}>
+                        <CLNOffersList />
+                      </Suspense>
                     </Tab.Pane>
                   </Tab.Content>
                 </motion.div>