StatusPage: async components

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 {
-import TrendsPanel from 'soapbox/features/ui/components/trends_panel';
+  WhoToFollowPanel,
-import PromoPanel from 'soapbox/features/ui/components/promo_panel';
+  TrendsPanel,
-import FeaturesPanel from 'soapbox/features/ui/components/features_panel';
+  PromoPanel,
-import SignUpPanel from 'soapbox/features/ui/components/sign_up_panel';
+  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' />}
+                {me ? (
-                {showWhoToFollowPanel && <WhoToFollowPanel limit={5} key='wtf-panel' />}
+                  <BundleContainer fetchComponent={FeaturesPanel}>
-                {me ? <FeaturesPanel key='features-panel' /> : <SignUpPanel key='sign-up-panel' />}
+                    {Component => <Component key='features-panel' />}
-                <PromoPanel key='promo-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>