From 1202d3d45d14c992e49b6594ab2a55f12799e3b4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 18 Sep 2021 20:54:55 -0500
Subject: [PATCH] StatusPage: async components

---
 app/soapbox/pages/status_page.js | 40 +++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/app/soapbox/pages/status_page.js b/app/soapbox/pages/status_page.js
index 9e1ba0399..492afb0bd 100644
--- a/app/soapbox/pages/status_page.js
+++ b/app/soapbox/pages/status_page.js
@@ -1,12 +1,16 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import BundleContainer from '../features/ui/containers/bundle_container';
 import PrimaryNavigation from 'soapbox/components/primary_navigation';
-import WhoToFollowPanel from 'soapbox/features/ui/components/who_to_follow_panel';
-import TrendsPanel from 'soapbox/features/ui/components/trends_panel';
-import PromoPanel from 'soapbox/features/ui/components/promo_panel';
-import FeaturesPanel from 'soapbox/features/ui/components/features_panel';
-import SignUpPanel from 'soapbox/features/ui/components/sign_up_panel';
+import {
+  WhoToFollowPanel,
+  TrendsPanel,
+  PromoPanel,
+  FeaturesPanel,
+  SignUpPanel,
+} from 'soapbox/features/ui/util/async-components';
+// import GroupSidebarPanel from '../features/groups/sidebar_panel';
 import LinkFooter from 'soapbox/features/ui/components/link_footer';
 import { getFeatures } from 'soapbox/utils/features';
 
@@ -46,10 +50,28 @@ class StatusPage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__pane columns-area__panels__pane--right'>
               <div className='columns-area__panels__pane__inner'>
-                {showTrendsPanel && <TrendsPanel limit={3} key='trends-panel' />}
-                {showWhoToFollowPanel && <WhoToFollowPanel limit={5} key='wtf-panel' />}
-                {me ? <FeaturesPanel key='features-panel' /> : <SignUpPanel key='sign-up-panel' />}
-                <PromoPanel key='promo-panel' />
+                {me ? (
+                  <BundleContainer fetchComponent={FeaturesPanel}>
+                    {Component => <Component key='features-panel' />}
+                  </BundleContainer>
+                ) : (
+                  <BundleContainer fetchComponent={SignUpPanel}>
+                    {Component => <Component key='sign-up-panel' />}
+                  </BundleContainer>
+                )}
+                {showTrendsPanel && (
+                  <BundleContainer fetchComponent={TrendsPanel}>
+                    {Component => <Component key='trends-panel' />}
+                  </BundleContainer>
+                )}
+                {showWhoToFollowPanel && (
+                  <BundleContainer fetchComponent={WhoToFollowPanel}>
+                    {Component => <Component limit={5} key='wtf-panel' />}
+                  </BundleContainer>
+                )}
+                <BundleContainer fetchComponent={PromoPanel}>
+                  {Component => <Component key='promo-panel' />}
+                </BundleContainer>
                 <LinkFooter key='link-footer' />
               </div>
             </div>