From 582dade27e35478af2b262120fbc6233b1029010 Mon Sep 17 00:00:00 2001 From: jaredvu Date: Tue, 19 Dec 2023 16:23:50 -0800 Subject: [PATCH] Lazy import pages --- src/App.tsx | 25 +++---- src/pages/AlertsPage.tsx | 4 +- src/pages/PrivacyPolicyPage.tsx | 4 +- src/pages/TermsOfUsePage.tsx | 4 +- src/pages/portfolio/Portfolio.tsx | 111 ++++++++++++++++-------------- src/pages/rewards/RewardsPage.tsx | 4 +- src/pages/settings/Settings.tsx | 4 +- 7 files changed, 86 insertions(+), 70 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 57d1970..7516445 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import { Suspense } from 'react'; +import { Suspense, lazy } from 'react'; import { Navigate, Route, Routes } from 'react-router-dom'; import styled, { AnyStyledComponent, css } from 'styled-components'; import { WagmiConfig } from 'wagmi'; @@ -25,16 +25,6 @@ import { SubaccountProvider } from '@/hooks/useSubaccount'; import { GuardedMobileRoute } from '@/components/GuardedMobileRoute'; -import MarketsPage from '@/pages/markets/Markets'; -import PortfolioPage from '@/pages/portfolio/Portfolio'; -import { AlertsPage } from '@/pages/AlertsPage'; -import ProfilePage from '@/pages/Profile'; -import { SettingsPage } from '@/pages/settings/Settings'; -import TradePage from '@/pages/trade/Trade'; -import { RewardsPage } from '@/pages/rewards/RewardsPage'; -import { TermsOfUsePage } from '@/pages/TermsOfUsePage'; -import { PrivacyPolicyPage } from '@/pages/PrivacyPolicyPage'; - import { HeaderDesktop } from '@/layout/Header/HeaderDesktop'; import { FooterDesktop } from '@/layout/Footer/FooterDesktop'; import { FooterMobile } from '@/layout/Footer/FooterMobile'; @@ -50,6 +40,17 @@ import { layoutMixins } from '@/styles/layoutMixins'; import '@/styles/constants.css'; import '@/styles/fonts.css'; import '@/styles/web3modal.css'; +import { LoadingSpace } from './components/Loading/LoadingSpinner'; + +const MarketsPage = lazy(() => import('@/pages/markets/Markets')); +const PortfolioPage = lazy(() => import('@/pages/portfolio/Portfolio')); +const AlertsPage = lazy(() => import('@/pages/AlertsPage')); +const ProfilePage = lazy(() => import('@/pages/Profile')); +const SettingsPage = lazy(() => import('@/pages/settings/Settings')); +const TradePage = lazy(() => import('@/pages/trade/Trade')); +const RewardsPage = lazy(() => import('@/pages/rewards/RewardsPage')); +const TermsOfUsePage = lazy(() => import('@/pages/TermsOfUsePage')); +const PrivacyPolicyPage = lazy(() => import('@/pages/PrivacyPolicyPage')); const queryClient = new QueryClient(); @@ -69,7 +70,7 @@ const Content = () => { {isNotTablet && } - + }> } /> diff --git a/src/pages/AlertsPage.tsx b/src/pages/AlertsPage.tsx index 87b6a6a..96bf932 100644 --- a/src/pages/AlertsPage.tsx +++ b/src/pages/AlertsPage.tsx @@ -1,4 +1,6 @@ import { DialogPlacement } from '@/components/Dialog'; import { NotificationsMenu } from '@/views/menus/NotificationsMenu'; -export const AlertsPage = () => ; +const AlertsPage = () => ; + +export default AlertsPage; diff --git a/src/pages/PrivacyPolicyPage.tsx b/src/pages/PrivacyPolicyPage.tsx index ac854ce..226ddb5 100644 --- a/src/pages/PrivacyPolicyPage.tsx +++ b/src/pages/PrivacyPolicyPage.tsx @@ -2,7 +2,7 @@ import styled, { AnyStyledComponent } from 'styled-components'; import { articleMixins } from '@/styles/articleMixins'; -export const PrivacyPolicyPage = () => ( +const PrivacyPolicyPage = () => (

Privacy Policy

@@ -10,6 +10,8 @@ export const PrivacyPolicyPage = () => ( ); +export default PrivacyPolicyPage; + const Styled: Record = {}; Styled.Article = styled.article` diff --git a/src/pages/TermsOfUsePage.tsx b/src/pages/TermsOfUsePage.tsx index cc4ea51..63f431c 100644 --- a/src/pages/TermsOfUsePage.tsx +++ b/src/pages/TermsOfUsePage.tsx @@ -2,7 +2,7 @@ import styled, { AnyStyledComponent } from 'styled-components'; import { articleMixins } from '@/styles/articleMixins'; -export const TermsOfUsePage = () => ( +const TermsOfUsePage = () => (

Sample Terms of Use

@@ -1076,6 +1076,8 @@ export const TermsOfUsePage = () => ( ); +export default TermsOfUsePage; + const Styled: Record = {}; Styled.Article = styled.article` diff --git a/src/pages/portfolio/Portfolio.tsx b/src/pages/portfolio/Portfolio.tsx index dc64379..9b46b43 100644 --- a/src/pages/portfolio/Portfolio.tsx +++ b/src/pages/portfolio/Portfolio.tsx @@ -1,17 +1,20 @@ +import { lazy, Suspense } from 'react'; import { shallowEqual, useDispatch, useSelector } from 'react-redux'; import styled, { type AnyStyledComponent } from 'styled-components'; import { Navigate, Route, Routes } from 'react-router-dom'; import { OnboardingState } from '@/constants/account'; +import { ButtonAction } from '@/constants/buttons'; import { DialogTypes } from '@/constants/dialogs'; import { STRING_KEYS } from '@/constants/localization'; import { HistoryRoute, PortfolioRoute } from '@/constants/routes'; - import { useAccountBalance, useBreakpoints, useDocumentTitle, useStringGetter } from '@/hooks'; +import { layoutMixins } from '@/styles/layoutMixins'; import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable'; import { FundingPaymentsTable } from '@/views/tables/FundingPaymentsTable'; import { TransferHistoryTable } from '@/views/tables/TransferHistoryTable'; +import { Button } from '@/components/Button'; import { Icon, IconName } from '@/components/Icon'; import { NavigationMenu } from '@/components/NavigationMenu'; import { WithSidebar } from '@/components/WithSidebar'; @@ -20,15 +23,15 @@ import { getOnboardingState, getSubaccount } from '@/state/accountSelectors'; import { openDialog } from '@/state/dialogs'; import { PortfolioNavMobile } from './PortfolioNavMobile'; -import { Overview } from './Overview'; -import { Positions } from './Positions'; -import { Orders } from './Orders'; -import { Fees } from './Fees'; -import { History } from './History'; +import { LoadingSpace } from '@/components/Loading/LoadingSpinner'; -import { layoutMixins } from '@/styles/layoutMixins'; -import { Button } from '@/components/Button'; -import { ButtonAction } from '@/constants/buttons'; +const Overview = lazy(() => import('./Overview').then((module) => ({ default: module.Overview }))); +const Positions = lazy(() => + import('./Positions').then((module) => ({ default: module.Positions })) +); +const Orders = lazy(() => import('./Orders').then((module) => ({ default: module.Orders }))); +const Fees = lazy(() => import('./Fees').then((module) => ({ default: module.Fees }))); +const History = lazy(() => import('./History').then((module) => ({ default: module.History }))); export default () => { const dispatch = useDispatch(); @@ -44,49 +47,51 @@ export default () => { useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO })); const routesComponent = ( - - } /> - } /> - } /> - } /> - }> - } /> - - } - /> - } - /> - } - /> - - } /> - + }> + + } /> + } /> + } /> + } /> + }> + } /> + + } + /> + } + /> + } + /> + + } /> + + ); return isTablet ? ( @@ -191,7 +196,7 @@ Styled.SideBar = styled.div` Styled.Footer = styled.div` ${layoutMixins.row} flex-wrap: wrap; - + padding: 1rem; gap: 0.5rem; diff --git a/src/pages/rewards/RewardsPage.tsx b/src/pages/rewards/RewardsPage.tsx index 745d746..2476c0f 100644 --- a/src/pages/rewards/RewardsPage.tsx +++ b/src/pages/rewards/RewardsPage.tsx @@ -21,7 +21,7 @@ import { DYDXBalancePanel } from './DYDXBalancePanel'; import { MigratePanel } from './MigratePanel'; import { LaunchIncentivesPanel } from './LaunchIncentivesPanel'; -export const RewardsPage = () => { +const RewardsPage = () => { const dispatch = useDispatch(); const stringGetter = useStringGetter(); const { governanceLearnMore, stakingLearnMore } = useURLConfigs(); @@ -84,6 +84,8 @@ export const RewardsPage = () => { ); }; +export default RewardsPage; + const Styled: Record = {}; Styled.Page = styled.div` diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx index 15de0d3..e8dde6d 100644 --- a/src/pages/settings/Settings.tsx +++ b/src/pages/settings/Settings.tsx @@ -25,7 +25,7 @@ import { useNetworks } from '@/views/menus/useNetworks'; import { SettingsHeader } from './SettingsHeader'; import { ComingSoonSpace } from '@/components/ComingSoon'; -export const SettingsPage = () => { +const SettingsPage = () => { const stringGetter = useStringGetter(); const { pathname } = useLocation(); const dispatch = useDispatch(); @@ -105,3 +105,5 @@ export const SettingsPage = () => { ); }; + +export default SettingsPage;