From b0e37c773e76cc658bcb296952af6d92a7a45daf Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 18 Sep 2021 17:48:13 -0500
Subject: [PATCH] Load panels async

---
 app/soapbox/components/profile_hover_card.js  |  7 ++-
 app/soapbox/containers/soapbox.js             |  5 +-
 .../features/ui/util/async-components.js      | 24 ++++++++++
 app/soapbox/pages/default_page.js             | 32 +++++++++----
 app/soapbox/pages/home_page.js                | 47 ++++++++++++++-----
 app/soapbox/pages/profile_page.js             | 10 ++--
 app/soapbox/pages/remote_instance_page.js     | 17 +++++--
 7 files changed, 111 insertions(+), 31 deletions(-)

diff --git a/app/soapbox/components/profile_hover_card.js b/app/soapbox/components/profile_hover_card.js
index 202be475d..c9d1024e7 100644
--- a/app/soapbox/components/profile_hover_card.js
+++ b/app/soapbox/components/profile_hover_card.js
@@ -4,7 +4,8 @@ import { useSelector, useDispatch } from 'react-redux';
 import { makeGetAccount } from 'soapbox/selectors';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import UserPanel from 'soapbox/features/ui/components/user_panel';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+import { UserPanel } from 'soapbox/features/ui/util/async-components';
 import ActionButton from 'soapbox/features/ui/components/action_button';
 import { isAdmin, isModerator } from 'soapbox/utils/accounts';
 import Badge from 'soapbox/components/badge';
@@ -74,7 +75,9 @@ export const ProfileHoverCard = ({ visible }) => {
             <FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
           </span>}
         <div className='profile-hover-card__action-button'><ActionButton account={account} small /></div>
-        <UserPanel className='profile-hover-card__user' accountId={account.get('id')} />
+        <BundleContainer fetchComponent={UserPanel}>
+          {Component => <Component className='profile-hover-card__user' accountId={account.get('id')} />}
+        </BundleContainer>
         {badges.length > 0 &&
           <div className='profile-hover-card__badges'>
             {badges}
diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index bc53d5c9d..1bde94db0 100644
--- a/app/soapbox/containers/soapbox.js
+++ b/app/soapbox/containers/soapbox.js
@@ -15,8 +15,6 @@ import UI from '../features/ui';
 // import Introduction from '../features/introduction';
 import { preload } from '../actions/preload';
 import { IntlProvider } from 'react-intl';
-import { previewState as previewMediaState } from 'soapbox/features/ui/components/media_modal';
-import { previewState as previewVideoState } from 'soapbox/features/ui/components/video_modal';
 import ErrorBoundary from '../components/error_boundary';
 import { fetchInstance } from 'soapbox/actions/instance';
 import { fetchSoapboxConfig } from 'soapbox/actions/soapbox';
@@ -30,6 +28,9 @@ import { FE_SUBDIRECTORY } from 'soapbox/build_config';
 
 const validLocale = locale => Object.keys(messages).includes(locale);
 
+const previewMediaState = 'previewMediaModal';
+const previewVideoState = 'previewVideoModal';
+
 export const store = configureStore();
 
 store.dispatch(preload());
diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js
index 5c66f6919..0c72d0b7b 100644
--- a/app/soapbox/features/ui/util/async-components.js
+++ b/app/soapbox/features/ui/util/async-components.js
@@ -290,6 +290,30 @@ export function ModerationLog() {
   return import(/* webpackChunkName: "features/admin/moderation_log" */'../../admin/moderation_log');
 }
 
+export function UserPanel() {
+  return import(/* webpackChunkName: "features/ui" */'../components/user_panel');
+}
+
+export function FeaturesPanel() {
+  return import(/* webpackChunkName: "features/ui" */'../components/features_panel');
+}
+
+export function PromoPanel() {
+  return import(/* webpackChunkName: "features/ui" */'../components/promo_panel');
+}
+
+export function SignUpPanel() {
+  return import(/* webpackChunkName: "features/ui" */'../components/sign_up_panel');
+}
+
+export function FundingPanel() {
+  return import(/* webpackChunkName: "features/ui" */'../components/funding_panel');
+}
+
+export function TrendsPanel() {
+  return import(/* webpackChunkName: "features/trends" */'../components/trends_panel');
+}
+
 export function CryptoDonate() {
   return import(/* webpackChunkName: "features/crypto_donate" */'../../crypto_donate');
 }
diff --git a/app/soapbox/pages/default_page.js b/app/soapbox/pages/default_page.js
index 6417e483e..1733eb147 100644
--- a/app/soapbox/pages/default_page.js
+++ b/app/soapbox/pages/default_page.js
@@ -2,11 +2,13 @@ import React from 'react';
 import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components';
-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 LinkFooter from 'soapbox/features/ui/components/link_footer';
 import { getFeatures } from 'soapbox/utils/features';
 
@@ -44,14 +46,28 @@ class DefaultPage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__pane columns-area__panels__pane--right'>
               <div className='columns-area__panels__pane__inner'>
-                {me ? <FeaturesPanel key='features-panel' /> : <SignUpPanel key='sign-up-panel' />}
-                {showTrendsPanel && <TrendsPanel limit={3} key='trends-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>
                 )}
-                <PromoPanel key='promo-panel' />
+                <BundleContainer fetchComponent={PromoPanel}>
+                  {Component => <Component key='promo-panel' />}
+                </BundleContainer>
                 <LinkFooter key='link-footer' />
               </div>
             </div>
diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js
index 0188a766b..d571514dc 100644
--- a/app/soapbox/pages/home_page.js
+++ b/app/soapbox/pages/home_page.js
@@ -5,14 +5,17 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import BundleContainer from '../features/ui/containers/bundle_container';
 import ComposeFormContainer from '../features/compose/containers/compose_form_container';
 import Avatar from '../components/avatar';
-import UserPanel from 'soapbox/features/ui/components/user_panel';
-import TrendsPanel from 'soapbox/features/ui/components/trends_panel';
-import PromoPanel from 'soapbox/features/ui/components/promo_panel';
-import FundingPanel from 'soapbox/features/ui/components/funding_panel';
-import { WhoToFollowPanel, CryptoDonatePanel } from 'soapbox/features/ui/util/async-components';
+import {
+  WhoToFollowPanel,
+  CryptoDonatePanel,
+  UserPanel,
+  TrendsPanel,
+  PromoPanel,
+  FundingPanel,
+  FeaturesPanel,
+  SignUpPanel,
+} from 'soapbox/features/ui/util/async-components';
 // import GroupSidebarPanel from '../features/groups/sidebar_panel';
-import FeaturesPanel from 'soapbox/features/ui/components/features_panel';
-import SignUpPanel from 'soapbox/features/ui/components/sign_up_panel';
 import LinkFooter from 'soapbox/features/ui/components/link_footer';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { getFeatures } from 'soapbox/utils/features';
@@ -56,8 +59,14 @@ class HomePage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__pane columns-area__panels__pane--left'>
               <div className='columns-area__panels__pane__inner'>
-                <UserPanel accountId={me} key='user-panel' />
-                {showFundingPanel && <FundingPanel key='funding-panel' />}
+                <BundleContainer fetchComponent={UserPanel}>
+                  {Component => <Component accountId={me} key='user-panel' />}
+                </BundleContainer>
+                {showFundingPanel && (
+                  <BundleContainer fetchComponent={FundingPanel}>
+                    {Component => <Component key='funding-panel' />}
+                  </BundleContainer>
+                )}
                 {showCryptoDonatePanel && (
                   <BundleContainer fetchComponent={CryptoDonatePanel}>
                     {Component => <Component limit={cryptoLimit} key='crypto-panel' />}
@@ -85,14 +94,28 @@ class HomePage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__pane columns-area__panels__pane--right'>
               <div className='columns-area__panels__pane__inner'>
-                {me ? <FeaturesPanel key='features-panel' /> : <SignUpPanel key='sign-up-panel' />}
-                {showTrendsPanel && <TrendsPanel limit={3} key='trends-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>
                 )}
-                <PromoPanel key='promo-panel' />
+                <BundleContainer fetchComponent={PromoPanel}>
+                  {Component => <Component key='promo-panel' />}
+                </BundleContainer>
                 <LinkFooter key='link-footer' />
               </div>
             </div>
diff --git a/app/soapbox/pages/profile_page.js b/app/soapbox/pages/profile_page.js
index c1376b2cf..663c77b3e 100644
--- a/app/soapbox/pages/profile_page.js
+++ b/app/soapbox/pages/profile_page.js
@@ -6,9 +6,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import Helmet from 'soapbox/components/helmet';
 import HeaderContainer from '../features/account_timeline/containers/header_container';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components';
+import {
+  WhoToFollowPanel,
+  SignUpPanel,
+} from 'soapbox/features/ui/util/async-components';
 import LinkFooter from '../features/ui/components/link_footer';
-import SignUpPanel from '../features/ui/components/sign_up_panel';
 import ProfileInfoPanel from '../features/ui/components/profile_info_panel';
 import ProfileMediaPanel from '../features/ui/components/profile_media_panel';
 import { getAcct } from 'soapbox/utils/accounts';
@@ -99,7 +101,9 @@ class ProfilePage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__pane columns-area__panels__pane--right'>
               <div className='columns-area__panels__pane__inner'>
-                <SignUpPanel />
+                <BundleContainer fetchComponent={SignUpPanel}>
+                  {Component => <Component />}
+                </BundleContainer>
                 {account && <ProfileMediaPanel account={account} />}
                 {features.suggestions && (
                   <BundleContainer fetchComponent={WhoToFollowPanel}>
diff --git a/app/soapbox/pages/remote_instance_page.js b/app/soapbox/pages/remote_instance_page.js
index b1a86ba9a..d6ed14437 100644
--- a/app/soapbox/pages/remote_instance_page.js
+++ b/app/soapbox/pages/remote_instance_page.js
@@ -1,8 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import PromoPanel from 'soapbox/features/ui/components/promo_panel';
-import FeaturesPanel from 'soapbox/features/ui/components/features_panel';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+import {
+  PromoPanel,
+  FeaturesPanel,
+} from 'soapbox/features/ui/util/async-components';
 import LinkFooter from 'soapbox/features/ui/components/link_footer';
 import InstanceInfoPanel from 'soapbox/features/ui/components/instance_info_panel';
 import InstanceModerationPanel from 'soapbox/features/ui/components/instance_moderation_panel';
@@ -46,8 +49,14 @@ class RemoteInstancePage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__pane columns-area__panels__pane--right'>
               <div className='columns-area__panels__pane__inner'>
-                {me && <FeaturesPanel key='features-panel' />}
-                <PromoPanel key='promo-panel' />
+                {me && (
+                  <BundleContainer fetchComponent={FeaturesPanel}>
+                    {Component => <Component key='features-panel' />}
+                  </BundleContainer>
+                )}
+                <BundleContainer fetchComponent={PromoPanel}>
+                  {Component => <Component key='promo-panel' />}
+                </BundleContainer>
                 <LinkFooter key='link-footer' />
               </div>
             </div>