Merge branch 'suspense' into 'main'

Suspense

See merge request soapbox-pub/soapbox!2782

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>
 );

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'>

src/features/ui/index.tsx

@@ -515,7 +515,9 @@ const UI: React.FC<IUI> = ({ children }) => {
             <ProfileHoverCard />
           </Suspense>
 
-          <StatusHoverCard />
+          <Suspense>
+            <StatusHoverCard />
+          </Suspense>
         </div>
       </div>
     </GlobalHotkeys>

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