From e298115fcf90ed9c0543e46afaebd2d3f18eafe7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 20 May 2022 13:00:38 -0500
Subject: [PATCH] SoapboxMount: async import NotificationsContainer,
 ModalContainer, remove them elsewhere

---
 app/soapbox/containers/soapbox.tsx            | 21 ++++++++++---------
 app/soapbox/features/auth_layout/index.tsx    |  6 ------
 app/soapbox/features/public_layout/index.tsx  | 13 ------------
 app/soapbox/features/ui/index.tsx             | 10 ---------
 .../features/verification/waitlist_page.js    |  6 ------
 5 files changed, 11 insertions(+), 45 deletions(-)

diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index 2d89cc9a2..2d339fea5 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -18,8 +18,8 @@ import LoadingScreen from 'soapbox/components/loading-screen';
 import AuthLayout from 'soapbox/features/auth_layout';
 import OnboardingWizard from 'soapbox/features/onboarding/onboarding-wizard';
 import PublicLayout from 'soapbox/features/public_layout';
-import NotificationsContainer from 'soapbox/features/ui/containers/notifications_container';
-import { ModalContainer } from 'soapbox/features/ui/util/async-components';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+import { ModalContainer, NotificationsContainer } from 'soapbox/features/ui/util/async-components';
 import WaitlistPage from 'soapbox/features/verification/waitlist_page';
 import { createGlobals } from 'soapbox/globals';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures, useSoapboxConfig, useSettings, useSystemTheme } from 'soapbox/hooks';
@@ -31,7 +31,6 @@ import { checkOnboardingStatus } from '../actions/onboarding';
 import { preload } from '../actions/preload';
 import ErrorBoundary from '../components/error_boundary';
 import UI from '../features/ui';
-import BundleContainer from '../features/ui/containers/bundle_container';
 import { store } from '../store';
 
 /** Ensure the given locale exists in our codebase */
@@ -173,13 +172,7 @@ const SoapboxMount = () => {
       )}
 
       {waitlisted && (
-        <>
-          <Route render={(props) => <WaitlistPage {...props} account={account} />} />
-
-          <BundleContainer fetchComponent={ModalContainer}>
-            {Component => <Component />}
-          </BundleContainer>
-        </>
+        <Route render={(props) => <WaitlistPage {...props} account={account} />} />
       )}
 
       {!me && (singleUserMode
@@ -232,6 +225,14 @@ const SoapboxMount = () => {
         <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
           <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
             {renderBody()}
+
+            <BundleContainer fetchComponent={NotificationsContainer}>
+              {(Component) => <Component />}
+            </BundleContainer>
+
+            <BundleContainer fetchComponent={ModalContainer}>
+              {Component => <Component />}
+            </BundleContainer>
           </ScrollContext>
         </BrowserRouter>
       </ErrorBoundary>
diff --git a/app/soapbox/features/auth_layout/index.tsx b/app/soapbox/features/auth_layout/index.tsx
index 1ac59b3de..ca72f4107 100644
--- a/app/soapbox/features/auth_layout/index.tsx
+++ b/app/soapbox/features/auth_layout/index.tsx
@@ -4,8 +4,6 @@ import { Link, Redirect, Route, Switch, useHistory } from 'react-router-dom';
 
 import LandingGradient from 'soapbox/components/landing-gradient';
 import SiteLogo from 'soapbox/components/site-logo';
-import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-import { NotificationsContainer } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
 
 import { Button, Card, CardBody } from '../../components/ui';
@@ -86,10 +84,6 @@ const AuthLayout = () => {
           </div>
         </div>
       </main>
-
-      <BundleContainer fetchComponent={NotificationsContainer}>
-        {(Component) => <Component />}
-      </BundleContainer>
     </div>
   );
 };
diff --git a/app/soapbox/features/public_layout/index.tsx b/app/soapbox/features/public_layout/index.tsx
index 3fe4834a5..5c7e45107 100644
--- a/app/soapbox/features/public_layout/index.tsx
+++ b/app/soapbox/features/public_layout/index.tsx
@@ -2,11 +2,6 @@ import React from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
 
 import LandingGradient from 'soapbox/components/landing-gradient';
-import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-import {
-  NotificationsContainer,
-  ModalContainer,
-} from 'soapbox/features/ui/util/async-components';
 import { useAppSelector } from 'soapbox/hooks';
 import { isStandalone } from 'soapbox/utils/state';
 
@@ -42,14 +37,6 @@ const PublicLayout = () => {
         </div>
 
         <Footer />
-
-        <BundleContainer fetchComponent={NotificationsContainer}>
-          {(Component) => <Component />}
-        </BundleContainer>
-
-        <BundleContainer fetchComponent={ModalContainer}>
-          {(Component) => <Component />}
-        </BundleContainer>
       </div>
     </div>
   );
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 164198e37..57bfb02f1 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -104,8 +104,6 @@ import {
   Directory,
   SidebarMenu,
   UploadArea,
-  NotificationsContainer,
-  ModalContainer,
   ProfileHoverCard,
   Share,
   NewStatus,
@@ -670,14 +668,6 @@ const UI: React.FC = ({ children }) => {
 
           {me && floatingActionButton}
 
-          <BundleContainer fetchComponent={NotificationsContainer}>
-            {Component => <Component />}
-          </BundleContainer>
-
-          <BundleContainer fetchComponent={ModalContainer}>
-            {Component => <Component />}
-          </BundleContainer>
-
           <BundleContainer fetchComponent={UploadArea}>
             {Component => <Component active={draggingOver} onClose={closeUploadModal} />}
           </BundleContainer>
diff --git a/app/soapbox/features/verification/waitlist_page.js b/app/soapbox/features/verification/waitlist_page.js
index 1e87e2078..14047b7b1 100644
--- a/app/soapbox/features/verification/waitlist_page.js
+++ b/app/soapbox/features/verification/waitlist_page.js
@@ -7,8 +7,6 @@ import { Link } from 'react-router-dom';
 import { openModal } from 'soapbox/actions/modals';
 import LandingGradient from 'soapbox/components/landing-gradient';
 import SiteLogo from 'soapbox/components/site-logo';
-import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-import { NotificationsContainer } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
 
 import { logOut } from '../../actions/auth';
@@ -74,10 +72,6 @@ const WaitlistPage = ({ account }) => {
           </div>
         </div>
       </main>
-
-      <BundleContainer fetchComponent={NotificationsContainer}>
-        {(Component) => <Component />}
-      </BundleContainer>
     </div>
   );
 };