From 9843eb4a3882ce3ace937bd6adeea1464aeea3e0 Mon Sep 17 00:00:00 2001
From: ishagoyale <iamishagoyal@gmail.com>
Date: Thu, 28 Sep 2023 15:56:44 +0530
Subject: [PATCH] Added lazy loading in routes of the app

---
 src/pages/App.tsx | 82 ++++++++++++++++++++++++-----------------------
 1 file changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index c28ba41c..cb2ebfa5 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -1,36 +1,14 @@
-import React, { Suspense, useEffect } from 'react'
+import React, { Suspense, useEffect, lazy } from 'react'
 import { Route, Switch } from 'react-router-dom'
 import styled from 'styled-components'
 import Header from '../components/Header'
 import Popups from '../components/Popups'
 import DarkModeQueryParamReader from '../theme/DarkModeQueryParamReader'
-
-import Swap from './Swap'
-import { RedirectPathToSwapOnly, RedirectToSwap } from './Swap/redirects'
-
-import Pool from './Pool'
-
-import RemoveLiquidity from './RemoveLiquidity'
-import {
-  RedirectDuplicateTokenIds,
-  RedirectOldAddLiquidityPathStructure,
-  RedirectToAddLiquidity
-} from './AddLiquidity/redirects'
-
-import Zap from './Zap'
-import ComingSoon from './ComingSoon'
-import Maintenance from './Maintenance'
 import Footer from '../components/Footer'
 import useFetchAllPairsCallback from '../hooks/useFetchAllPairs'
 import { MainnetWarningModal } from '../components/MainnetWarningModal'
 import { Web3ReactProvider } from '@web3-react/core'
-import {
-  isProductionChainId,
-  isProductionEnvironment,
-  isStagingEnvironment,
-  isTestnetChainId,
-  isTestnetEnvironment
-} from '../connectors'
+import { isProductionChainId, isProductionEnvironment, isTestnetChainId, isTestnetEnvironment } from '../connectors'
 import { useAccount, useConnectors } from '@starknet-react/core'
 import { StarknetChainId } from 'starknet/dist/constants'
 import { useAccountDetails } from '../hooks'
@@ -71,6 +49,28 @@ const Marginer = styled.div`
   margin-top: 5rem;
 `
 
+const Swap = lazy(() => import('./Swap'))
+const Pool = lazy(() => import('./Pool'))
+const Zap = lazy(() => import('./Zap'))
+const ComingSoon = lazy(() => import('./ComingSoon'))
+const RemoveLiquidity = lazy(() => import('./RemoveLiquidity'))
+
+const RedirectPathToSwapOnly = lazy(() =>
+  import('./Swap/redirects').then(module => ({ default: module.RedirectPathToSwapOnly }))
+)
+
+const RedirectToSwap = lazy(() => import('./Swap/redirects').then(module => ({ default: module.RedirectToSwap })))
+
+const RedirectToAddLiquidity = lazy(() =>
+  import('./AddLiquidity/redirects').then(module => ({ default: module.RedirectToAddLiquidity }))
+)
+const RedirectOldAddLiquidityPathStructure = lazy(() =>
+  import('./AddLiquidity/redirects').then(module => ({ default: module.RedirectOldAddLiquidityPathStructure }))
+)
+const RedirectDuplicateTokenIds = lazy(() =>
+  import('./AddLiquidity/redirects').then(module => ({ default: module.RedirectDuplicateTokenIds }))
+)
+
 export default function App() {
   const fetchAllPairs = useFetchAllPairsCallback()
   const { disconnect } = useConnectors()
@@ -105,22 +105,24 @@ export default function App() {
           <MainnetWarningModal />
 
           <Web3ReactProvider getLibrary={web3 => web3}>
-            <Switch>
-              <Route exact strict path="/swap" component={Swap} />
-              <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
-              <Route exact strict path="/pool" component={Pool} />
-              <Route exact path="/add" component={RedirectToAddLiquidity} />
-              <Route exact path="/add/:currencyIdA" component={RedirectOldAddLiquidityPathStructure} />
-              <Route exact path="/add/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
-              <Route exact path="/create" component={RedirectToAddLiquidity} />
-              <Route exact path="/create/:currencyIdA" component={RedirectOldAddLiquidityPathStructure} />
-              <Route exact path="/create/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
-              <Route exact path="/zap" component={Zap} />
-              {/* <Route exact path="/bridge" component={Bridge} /> */}
-              <Route exact path="/stake" component={ComingSoon} />
-              <Route exact strict path="/remove/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
-              <Route component={RedirectPathToSwapOnly} />
-            </Switch>
+            <Suspense fallback={'Loading...'}>
+              <Switch>
+                <Route exact strict path="/swap" component={Swap} />
+                <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
+                <Route exact strict path="/pool" component={Pool} />
+                <Route exact path="/add" component={RedirectToAddLiquidity} />
+                <Route exact path="/add/:currencyIdA" component={RedirectOldAddLiquidityPathStructure} />
+                <Route exact path="/add/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
+                <Route exact path="/create" component={RedirectToAddLiquidity} />
+                <Route exact path="/create/:currencyIdA" component={RedirectOldAddLiquidityPathStructure} />
+                <Route exact path="/create/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
+                <Route exact path="/zap" component={Zap} />
+                {/* <Route exact path="/bridge" component={Bridge} /> */}
+                <Route exact path="/stake" component={ComingSoon} />
+                <Route exact strict path="/remove/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
+                <Route component={RedirectPathToSwapOnly} />
+              </Switch>
+            </Suspense>
           </Web3ReactProvider>
           <Marginer />
         </BodyWrapper>