From f47d00be37e44c6268701922cba4bae99b98b8fc Mon Sep 17 00:00:00 2001
From: Zach Pomerantz <zzmp@uniswap.org>
Date: Fri, 15 Sep 2023 12:40:19 -0700
Subject: [PATCH] feat: lazy-load popups/modals/chrome (#7313)

* fix: synchronously load first page

* feat: lazy-load popups/modals/chrome
---
 src/pages/App.tsx       | 10 ++++------
 src/pages/AppChrome.tsx | 13 +++++++++++++
 2 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/AppChrome.tsx

diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 2f748df672..6e43cc270a 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -4,9 +4,6 @@ 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'
 import { useAtom } from 'jotai'
@@ -32,6 +29,7 @@ import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
 import Landing from './Landing'
 import Swap from './Swap'
 
+const AppChrome = lazy(() => import('./AppChrome'))
 const NftExplore = lazy(() => import('nft/pages/explore'))
 const Collection = lazy(() => import('nft/pages/collection'))
 const Profile = lazy(() => import('nft/pages/profile/profile'))
@@ -219,9 +217,9 @@ export default function App() {
             <NavBar blur={isHeaderTransparent} />
           </HeaderWrapper>
           <BodyWrapper>
-            <Popups />
-            <Polling />
-            <TopLevelModals />
+            <Suspense>
+              <AppChrome />
+            </Suspense>
             <Suspense fallback={<Loader />}>
               {isLoaded ? (
                 <Routes>
diff --git a/src/pages/AppChrome.tsx b/src/pages/AppChrome.tsx
new file mode 100644
index 0000000000..3b8c7bbc81
--- /dev/null
+++ b/src/pages/AppChrome.tsx
@@ -0,0 +1,13 @@
+import Polling from 'components/Polling'
+import Popups from 'components/Popups'
+import TopLevelModals from 'components/TopLevelModals'
+
+export default function AppChrome() {
+  return (
+    <>
+      <Popups />
+      <Polling />
+      <TopLevelModals />
+    </>
+  )
+}