From 82ea3e60a782e0995231ddab8db928f7b8f978a2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 7 Oct 2023 22:48:42 -0500
Subject: [PATCH 1/3] SoapboxMount: add Suspense boundaries

---
 src/init/soapbox-mount.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/init/soapbox-mount.tsx b/src/init/soapbox-mount.tsx
index bbc911691..ed7f70c47 100644
--- a/src/init/soapbox-mount.tsx
+++ b/src/init/soapbox-mount.tsx
@@ -76,15 +76,24 @@ const SoapboxMount = () => {
             <Switch>
               <Route
                 path='/embed/:statusId'
-                render={(props) => <EmbeddedStatus params={props.match.params} />}
+                render={(props) => (
+                  <Suspense>
+                    <EmbeddedStatus params={props.match.params} />
+                  </Suspense>
+                )}
               />
               <Redirect from='/@:username/:statusId/embed' to='/embed/:statusId' />
 
               <Route>
                 {renderBody()}
 
-                <ModalContainer />
-                <GdprBanner />
+                <Suspense>
+                  <ModalContainer />
+                </Suspense>
+
+                <Suspense>
+                  <GdprBanner />
+                </Suspense>
 
                 <div id='toaster'>
                   <Toaster

From 5c3cebfd3c63a0a00f972d885eb92331b8175f77 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 7 Oct 2023 22:51:48 -0500
Subject: [PATCH 2/3] Layout.Aside: add Suspense boundary for the whole
 component

---
 src/components/ui/layout/layout.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/layout/layout.tsx b/src/components/ui/layout/layout.tsx
index 459febef2..0ede77e6b 100644
--- a/src/components/ui/layout/layout.tsx
+++ b/src/components/ui/layout/layout.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { Suspense } from 'react';
 import StickyBox from 'react-sticky-box';
 
 interface ISidebar {
@@ -52,7 +52,9 @@ const Main: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ children, classN
 const Aside: React.FC<IAside> = ({ children }) => (
   <aside className='hidden xl:col-span-3 xl:block'>
     <StickyBox offsetTop={80} className='space-y-6 pb-12'>
-      {children}
+      <Suspense>
+        {children}
+      </Suspense>
     </StickyBox>
   </aside>
 );

From 78884a424840736b25c7efeb22aeec5b351ea261 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 7 Oct 2023 22:57:43 -0500
Subject: [PATCH 3/3] UI: wrap StatusHoverCard with Suspense boundary

---
 src/features/report/components/status-check-box.tsx | 4 ++--
 src/features/ui/index.tsx                           | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/features/report/components/status-check-box.tsx b/src/features/report/components/status-check-box.tsx
index b8cb48015..96df936a2 100644
--- a/src/features/report/components/status-check-box.tsx
+++ b/src/features/report/components/status-check-box.tsx
@@ -1,5 +1,5 @@
 import noop from 'lodash/noop';
-import React from 'react';
+import React, { Suspense } from 'react';
 
 import { toggleStatusReport } from 'soapbox/actions/reports';
 import StatusContent from 'soapbox/components/status-content';
@@ -73,7 +73,7 @@ const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
     <div className='status-check-box'>
       <div className='status-check-box__status'>
         <StatusContent status={status} />
-        {media}
+        <Suspense>{media}</Suspense>
       </div>
 
       <div className='status-check-box-toggle'>
diff --git a/src/features/ui/index.tsx b/src/features/ui/index.tsx
index fcd411dc7..943cd6d3c 100644
--- a/src/features/ui/index.tsx
+++ b/src/features/ui/index.tsx
@@ -515,7 +515,9 @@ const UI: React.FC<IUI> = ({ children }) => {
             <ProfileHoverCard />
           </Suspense>
 
-          <StatusHoverCard />
+          <Suspense>
+            <StatusHoverCard />
+          </Suspense>
         </div>
       </div>
     </GlobalHotkeys>