Profile: make account panels async

app/soapbox/features/account/components/header.js

@@ -22,7 +22,8 @@ import Avatar from 'soapbox/components/avatar';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 import { NavLink } from 'react-router-dom';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
-import ProfileInfoPanel from '../../ui/components/profile_info_panel';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+import { ProfileInfoPanel } from 'soapbox/features/ui/util/async-components';
 import { debounce } from 'lodash';
 import StillImage from 'soapbox/components/still_image';
 import ActionButton from 'soapbox/features/ui/components/action_button';
@@ -303,12 +304,13 @@ class Header extends ImmutablePureComponent {
             <div className='account__header__extra'>
               <div className='account__header__avatar' />
             </div>
-            {
-              isSmallScreen &&
+            {isSmallScreen && (
               <div className='account-mobile-container account-mobile-container--nonuser'>
-                <ProfileInfoPanel username={username} />
+                <BundleContainer fetchComponent={ProfileInfoPanel}>
+                  {Component => <Component username={username} />}
+                </BundleContainer>
               </div>
-            }
+            )}
           </div>
         </div>
       );
@@ -380,12 +382,13 @@ class Header extends ImmutablePureComponent {
               }
             </div>
 
-            {
-              isSmallScreen &&
+            {isSmallScreen && (
               <div className={classNames('account-mobile-container', { 'deactivated': deactivated })}>
-                <ProfileInfoPanel username={username} account={account} />
+                <BundleContainer fetchComponent={ProfileInfoPanel}>
+                  {Component => <Component username={username} account={account} />}
+                </BundleContainer>
               </div>
-            }
+            )}
 
             <div className='account__header__extra__buttons'>
               <ActionButton account={account} />

app/soapbox/features/ui/util/async-components.js

@@ -314,6 +314,14 @@ export function TrendsPanel() {
   return import(/* webpackChunkName: "features/trends" */'../components/trends_panel');
 }
 
+export function ProfileInfoPanel() {
+  return import(/* webpackChunkName: "features/account_timeline" */'../components/profile_info_panel');
+}
+
+export function ProfileMediaPanel() {
+  return import(/* webpackChunkName: "features/account_gallery" */'../components/profile_media_panel');
+}
+
 export function CryptoDonate() {
   return import(/* webpackChunkName: "features/crypto_donate" */'../../crypto_donate');
 }

app/soapbox/pages/profile_page.js

@@ -9,10 +9,10 @@ import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import {
   WhoToFollowPanel,
   SignUpPanel,
+  ProfileInfoPanel,
+  ProfileMediaPanel,
 } from 'soapbox/features/ui/util/async-components';
 import LinkFooter from '../features/ui/components/link_footer';
-import ProfileInfoPanel from '../features/ui/components/profile_info_panel';
-import ProfileMediaPanel from '../features/ui/components/profile_media_panel';
 import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';
 import { getFeatures } from 'soapbox/utils/features';
@@ -89,7 +89,9 @@ class ProfilePage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__pane columns-area__panels__pane--left'>
               <div className='columns-area__panels__pane__inner'>
-                <ProfileInfoPanel username={accountUsername} account={account} />
+                <BundleContainer fetchComponent={ProfileInfoPanel}>
+                  {Component => <Component username={accountUsername} account={account} />}
+                </BundleContainer>
               </div>
             </div>
 
@@ -104,7 +106,11 @@ class ProfilePage extends ImmutablePureComponent {
                 <BundleContainer fetchComponent={SignUpPanel}>
                   {Component => <Component />}
                 </BundleContainer>
-                {account && <ProfileMediaPanel account={account} />}
+                {account && (
+                  <BundleContainer fetchComponent={ProfileMediaPanel}>
+                    {Component => <Component account={account} />}
+                  </BundleContainer>
+                )}
                 {features.suggestions && (
                   <BundleContainer fetchComponent={WhoToFollowPanel}>
                     {Component => <Component />}