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