feat: lazy-load non-swap routes (#7315)

* feat: lazy-load non-swap routes

* retain swap nav location

src/pages/AddLiquidity/redirects.tsx

@@ -4,7 +4,7 @@ import { Navigate, useParams } from 'react-router-dom'
 import { WRAPPED_NATIVE_CURRENCY } from '../../constants/tokens'
 import AddLiquidity from './index'
 
-export function RedirectDuplicateTokenIds() {
+export default function RedirectDuplicateTokenIds() {
   const { currencyIdA, currencyIdB } = useParams<{ currencyIdA: string; currencyIdB: string; feeAmount?: string }>()
 
   const { chainId } = useWeb3React()

src/pages/AddLiquidityV2/redirects.tsx

@@ -2,7 +2,7 @@ import { Navigate, useParams } from 'react-router-dom'
 
 import AddLiquidityV2 from './index'
 
-export function RedirectDuplicateTokenIdsV2() {
+export default function RedirectDuplicateTokenIdsV2() {
   const { currencyIdA, currencyIdB } = useParams<{ currencyIdA: string; currencyIdB: string }>()
 
   if (currencyIdA && currencyIdB && currencyIdA.toLowerCase() === currencyIdB.toLowerCase()) {

src/pages/App.tsx

@@ -1,7 +1,11 @@
 import { CustomUserProperties, getBrowser, SharedEventName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
 import { getDeviceId, sendAnalyticsEvent, Trace, user } from 'analytics'
+import ErrorBoundary from 'components/ErrorBoundary'
 import Loader from 'components/Icons/LoadingSpinner'
+import NavBar, { PageTabs } from 'components/NavBar'
+import Polling from 'components/Polling'
+import Popups from 'components/Popups'
 import TopLevelModals from 'components/TopLevelModals'
 import { useFeatureFlagsIsLoaded } from 'featureFlags'
 import { useInfoPoolPageEnabled } from 'featureFlags/flags/infoPoolPage'
@@ -14,44 +18,40 @@ import { useRouterPreference } from 'state/user/hooks'
 import { StatsigProvider, StatsigUser } from 'statsig-react'
 import styled from 'styled-components'
 import { SpinnerSVG } from 'theme/components'
+import DarkModeQueryParamReader from 'theme/components/DarkModeQueryParamReader'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
 import { flexRowNoWrap } from 'theme/styles'
 import { Z_INDEX } from 'theme/zIndex'
 import { STATSIG_DUMMY_KEY } from 'tracing'
 import { getEnvName, isBrowserRouterEnabled } from 'utils/env'
+import { getDownloadAppLink } from 'utils/openDownloadApp'
 import { getCurrentPageFromLocation } from 'utils/urlRoutes'
 import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
 
-import ErrorBoundary from '../components/ErrorBoundary'
-import NavBar, { PageTabs } from '../components/NavBar'
-import Polling from '../components/Polling'
-import Popups from '../components/Popups'
-import DarkModeQueryParamReader from '../theme/components/DarkModeQueryParamReader'
-import { getDownloadAppLink } from '../utils/openDownloadApp'
-import AddLiquidity from './AddLiquidity'
-import { RedirectDuplicateTokenIds } from './AddLiquidity/redirects'
-import { RedirectDuplicateTokenIdsV2 } from './AddLiquidityV2/redirects'
+// High-traffic pages (index and /swap) should not be lazy-loaded.
 import Landing from './Landing'
-import MigrateV2 from './MigrateV2'
-import MigrateV2Pair from './MigrateV2/MigrateV2Pair'
-import NotFound from './NotFound'
-import Pool from './Pool'
-import PositionPage from './Pool/PositionPage'
-import PoolV2 from './Pool/v2'
-import PoolFinder from './PoolFinder'
-import RemoveLiquidity from './RemoveLiquidity'
-import RemoveLiquidityV3 from './RemoveLiquidity/V3'
 import Swap from './Swap'
-import { RedirectPathToSwapOnly } from './Swap/redirects'
-import Tokens from './Tokens'
 
-const TokenDetails = lazy(() => import('./TokenDetails'))
-const PoolDetails = lazy(() => import('./PoolDetails'))
-const Vote = lazy(() => import('./Vote'))
 const NftExplore = lazy(() => import('nft/pages/explore'))
 const Collection = lazy(() => import('nft/pages/collection'))
 const Profile = lazy(() => import('nft/pages/profile/profile'))
 const Asset = lazy(() => import('nft/pages/asset/Asset'))
+const AddLiquidity = lazy(() => import('pages/AddLiquidity'))
+const RedirectDuplicateTokenIds = lazy(() => import('pages/AddLiquidity/redirects'))
+const RedirectDuplicateTokenIdsV2 = lazy(() => import('pages/AddLiquidityV2/redirects'))
+const MigrateV2 = lazy(() => import('pages/MigrateV2'))
+const MigrateV2Pair = lazy(() => import('pages/MigrateV2/MigrateV2Pair'))
+const NotFound = lazy(() => import('pages/NotFound'))
+const Pool = lazy(() => import('pages/Pool'))
+const PositionPage = lazy(() => import('pages/Pool/PositionPage'))
+const PoolV2 = lazy(() => import('pages/Pool/v2'))
+const PoolDetails = lazy(() => import('pages/PoolDetails'))
+const PoolFinder = lazy(() => import('pages/PoolFinder'))
+const RemoveLiquidity = lazy(() => import('pages/RemoveLiquidity'))
+const RemoveLiquidityV3 = lazy(() => import('pages/RemoveLiquidity/V3'))
+const TokenDetails = lazy(() => import('pages/TokenDetails'))
+const Tokens = lazy(() => import('pages/Tokens'))
+const Vote = lazy(() => import('pages/Vote'))
 
 const BodyWrapper = styled.div`
   display: flex;
@@ -114,7 +114,8 @@ export default function App() {
   const [shouldDisableNFTRoutes, setShouldDisableNFTRoutes] = useAtom(shouldDisableNFTRoutesAtom)
 
   const browserRouterEnabled = isBrowserRouterEnabled()
-  const { hash, pathname } = useLocation()
+  const location = useLocation()
+  const { hash, pathname } = location
   const currentPage = getCurrentPageFromLocation(pathname)
   const isDarkMode = useIsDarkMode()
   const [routerPreference] = useRouterPreference()
@@ -246,7 +247,7 @@ export default function App() {
                     }
                   />
                   <Route path="create-proposal" element={<Navigate to="/vote/create-proposal" replace />} />
-                  <Route path="send" element={<RedirectPathToSwapOnly />} />
+                  <Route path="send" element={<Navigate to={{ ...location, pathname: '/swap' }} replace />} />
                   <Route path="swap" element={<Swap />} />
 
                   <Route path="pool/v2/find" element={<PoolFinder />} />

src/pages/Landing/index.tsx

@@ -10,11 +10,10 @@ import { BaseButton } from 'components/Button'
 import { AppleLogo } from 'components/Logo/AppleLogo'
 import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import Swap from 'pages/Swap'
-import { RedirectPathToSwapOnly } from 'pages/Swap/redirects'
 import { parse } from 'qs'
 import { useEffect, useMemo, useRef } from 'react'
 import { ArrowDownCircle } from 'react-feather'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { Navigate, useLocation, useNavigate } from 'react-router-dom'
 import { Link as NativeLink } from 'react-router-dom'
 import { useAppSelector } from 'state/hooks'
 import styled, { css } from 'styled-components'
@@ -319,9 +318,10 @@ export default function Landing() {
     }
   }, [accountDrawerOpen, navigate])
 
-  const queryParams = parse(useLocation().search, { ignoreQueryPrefix: true })
+  const location = useLocation()
+  const queryParams = parse(location.search, { ignoreQueryPrefix: true })
   if (selectedWallet && !queryParams.intro) {
-    return <RedirectPathToSwapOnly />
+    return <Navigate to={{ ...location, pathname: '/swap' }} replace />
   }
 
   return (

src/pages/Swap/redirects.tsx

@@ -1,7 +0,0 @@
-import { Navigate, useLocation } from 'react-router-dom'
-
-// Redirects to swap but only replace the pathname
-export function RedirectPathToSwapOnly() {
-  const location = useLocation()
-  return <Navigate to={{ ...location, pathname: '/swap' }} replace />
-}