From 1e77adda34c51caf25057b1e7f455dc601bdc390 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 18 Sep 2021 19:34:45 -0500
Subject: [PATCH] Admin: async components

---
 app/soapbox/features/ui/util/async-components.js |  8 ++++++++
 app/soapbox/pages/admin_page.js                  | 15 +++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js
index 40b92d935..1d3eae519 100644
--- a/app/soapbox/features/ui/util/async-components.js
+++ b/app/soapbox/features/ui/util/async-components.js
@@ -330,6 +330,14 @@ export function InstanceModerationPanel() {
   return import(/* webpackChunkName: "features/remote_timeline" */'../components/profile_media_panel');
 }
 
+export function LatestAccountsPanel() {
+  return import(/* webpackChunkName: "features/admin" */'../../admin/components/latest_accounts_panel');
+}
+
+export function AdminNav() {
+  return import(/* webpackChunkName: "features/admin" */'../../admin/components/admin_nav');
+}
+
 export function CryptoDonate() {
   return import(/* webpackChunkName: "features/crypto_donate" */'../../crypto_donate');
 }
diff --git a/app/soapbox/pages/admin_page.js b/app/soapbox/pages/admin_page.js
index a010581cc..a91d87461 100644
--- a/app/soapbox/pages/admin_page.js
+++ b/app/soapbox/pages/admin_page.js
@@ -1,8 +1,11 @@
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import LinkFooter from '../features/ui/components/link_footer';
-import AdminNav from 'soapbox/features/admin/components/admin_nav';
-import LatestAccountsPanel from 'soapbox/features/admin/components/latest_accounts_panel';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+import {
+  AdminNav,
+  LatestAccountsPanel,
+} from 'soapbox/features/ui/util/async-components';
 
 export default
 class AdminPage extends ImmutablePureComponent {
@@ -17,7 +20,9 @@ class AdminPage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__pane columns-area__panels__pane--left'>
               <div className='columns-area__panels__pane__inner'>
-                <AdminNav />
+                <BundleContainer fetchComponent={AdminNav}>
+                  {Component => <Component />}
+                </BundleContainer>
               </div>
             </div>
 
@@ -29,7 +34,9 @@ class AdminPage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__pane columns-area__panels__pane--right'>
               <div className='columns-area__panels__pane__inner'>
-                <LatestAccountsPanel limit={5} />
+                <BundleContainer fetchComponent={LatestAccountsPanel}>
+                  {Component => <Component limit={5} />}
+                </BundleContainer>
                 <LinkFooter />
               </div>
             </div>