From a72ea2b52547cdfd53fd4cb0e3765865edb34c62 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Wed, 12 Aug 2020 17:52:46 -0500
Subject: [PATCH] Updated panels to be async_components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Updated:
- panels to be async_components

• Added:
- WrappedBundle
---
 .../components/sidebar_panel_group.js         | 31 ++++++++++++--
 .../gabsocial/features/group_about.js         | 17 +++++++-
 .../features/ui/util/async_components.js      | 25 +++++++++++-
 .../features/ui/util/wrapped_bundle.js        | 40 +++++++++++++++++++
 .../gabsocial/layouts/about_layout.js         | 17 ++++----
 .../gabsocial/layouts/explore_layout.js       | 15 ++++---
 .../gabsocial/layouts/group_layout.js         | 21 +++++-----
 .../gabsocial/layouts/profile_layout.js       | 31 +++++++-------
 .../gabsocial/layouts/settings_layout.js      |  7 +++-
 app/javascript/gabsocial/pages/basic_page.js  | 14 ++++---
 .../gabsocial/pages/community_page.js         | 22 +++++-----
 app/javascript/gabsocial/pages/groups_page.js | 11 +++--
 .../gabsocial/pages/hashtag_page.js           | 18 +++++----
 app/javascript/gabsocial/pages/home_page.js   | 39 +++++++++---------
 app/javascript/gabsocial/pages/list_page.js   | 19 +++++----
 app/javascript/gabsocial/pages/lists_page.js  | 14 ++++---
 app/javascript/gabsocial/pages/modal_page.js  | 14 ++++---
 app/javascript/gabsocial/pages/news_page.js   | 22 +++++-----
 .../gabsocial/pages/notifications_page.js     | 18 +++++----
 app/javascript/gabsocial/pages/pro_page.js    | 14 ++++---
 app/javascript/gabsocial/pages/search_page.js | 18 +++++----
 .../gabsocial/pages/shortcuts_page.js         | 14 ++++---
 22 files changed, 292 insertions(+), 149 deletions(-)
 create mode 100644 app/javascript/gabsocial/features/ui/util/wrapped_bundle.js

diff --git a/app/javascript/gabsocial/components/sidebar_panel_group.js b/app/javascript/gabsocial/components/sidebar_panel_group.js
index 22a0768c..c85b8226 100644
--- a/app/javascript/gabsocial/components/sidebar_panel_group.js
+++ b/app/javascript/gabsocial/components/sidebar_panel_group.js
@@ -1,6 +1,10 @@
 import { Fragment } from 'react'
 import { me, promotions } from '../initial_state'
-import StatusPromotionPanel from './panel/status_promotion_panel'
+import Bundle from '../features/ui/util/bundle'
+import WrappedBundle from '../features/ui/util/bundle'
+import {
+  StatusPromotionPanel
+} from '../features/ui/util/async_components'
 
 export default class SidebarPanelGroup extends PureComponent {
 
@@ -20,16 +24,35 @@ export default class SidebarPanelGroup extends PureComponent {
       if (!!promotion) {
         const correctedPosition = promotion.position - 1 > layout.length ? layout.length - 1 : promotion.position
         if (!layout.find(p => p.key === 'status-promotion-panel')) {
-          layout.splice(correctedPosition, 0, <StatusPromotionPanel key='status-promotion-panel' statusId={promotion.status_id} />)
+          layout.splice(correctedPosition, 0, <WrappedBundle component={StatusPromotionPanel} componentParams={{ statusId: promotion.status_id }} />)
         }
       }
     }
 
     return (
       <Fragment>
-        {layout}
+        {
+          layout.map((panel) => {
+            if (typeof panel !== 'function') {
+              return panel
+            }
+
+            return (
+              <Bundle
+                fetchComponent={panel}
+                loading={this.renderLoading}
+                error={this.renderError}
+                renderDelay={150}
+              >
+                {
+                  (Component) => <Component />
+                }
+              </Bundle>
+            )
+          })
+        }
       </Fragment>
     )
   }
 
-}
+}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/group_about.js b/app/javascript/gabsocial/features/group_about.js
index 98d1e4af..1e54c10d 100644
--- a/app/javascript/gabsocial/features/group_about.js
+++ b/app/javascript/gabsocial/features/group_about.js
@@ -4,7 +4,11 @@ import isObject from 'lodash.isobject'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import ColumnIndicator from '../components/column_indicator'
 import Responsive from './ui/util/responsive_component'
-import GroupInfoPanel from '../components/panel/group_info_panel'
+import Bundle from '../features/ui/util/bundle'
+import {
+	GroupInfoPanel
+} from '../features/ui/util/async_components'
+
 
 const mapStateToProps = (state, { params }) => {
 	const groupId = isObject(params) ? params['id'] : null
@@ -34,7 +38,16 @@ class GroupAbout extends ImmutablePureComponent {
 					<ColumnIndicator type='missing' />
 				</Responsive>
 				<Responsive max={BREAKPOINT_EXTRA_SMALL}>
-					<GroupInfoPanel group={group} />
+					<Bundle
+						fetchComponent={GroupInfoPanel}
+						loading={this.renderLoading}
+						error={this.renderError}
+						renderDelay={150}
+					>
+						{
+							(Component) => <Component group={group} />
+						}
+					</Bundle>
 				</Responsive>
 			</div>
 		)
diff --git a/app/javascript/gabsocial/features/ui/util/async_components.js b/app/javascript/gabsocial/features/ui/util/async_components.js
index fcbfe59f..02a9713c 100644
--- a/app/javascript/gabsocial/features/ui/util/async_components.js
+++ b/app/javascript/gabsocial/features/ui/util/async_components.js
@@ -1,4 +1,5 @@
 export function About() { return import(/* webpackChunkName: "features/about/about" */'../../about/about') }
+export function AboutSidebar() { return import(/* webpackChunkName: "components/about_sidebar" */'../../../components/about_sidebar') }
 export function AccountTimeline() { return import(/* webpackChunkName: "features/account_timeline" */'../../account_timeline') }
 export function AccountGallery() { return import(/* webpackChunkName: "features/account_gallery" */'../../account_gallery') }
 export function BlockAccountModal() { return import(/* webpackChunkName: "components/block_account_modal" */'../../../components/modal/block_account_modal') }
@@ -26,16 +27,19 @@ export function FollowRequests() { return import(/* webpackChunkName: "features/
 export function LikedStatuses() { return import(/* webpackChunkName: "features/liked_statuses" */'../../liked_statuses') }
 export function GenericNotFound() { return import(/* webpackChunkName: "features/generic_not_found" */'../../generic_not_found') }
 export function GifPickerModal() { return import(/* webpackChunkName: "components/gif_picker_modal" */'../../../components/modal/gif_picker_modal') }
+export function GlobalFooter() { return import(/* webpackChunkName: "components/global_footer" */'../../../components/global_footer') }
 export function GroupsCollection() { return import(/* webpackChunkName: "features/groups_collection" */'../../groups_collection') }
 export function GroupAbout() { return import(/* webpackChunkName: "features/group_about" */'../../group_about.js') }
 export function GroupCollectionTimeline() { return import(/* webpackChunkName: "features/group_collection_timeline" */'../../group_collection_timeline') }
 export function GroupCreate() { return import(/* webpackChunkName: "features/group_create" */'../../group_create') }
 export function GroupCreateModal() { return import(/* webpackChunkName: "components/group_create_modal" */'../../../components/modal/group_create_modal') }
 export function GroupDeleteModal() { return import(/* webpackChunkName: "components/group_delete_modal" */'../../../components/modal/group_delete_modal') }
+export function GroupInfoPanel() { return import(/* webpackChunkName: "components/group_info_panel" */'../../../components/panel/group_info_panel') }
 export function GroupListSortOptionsPopover() { return import(/* webpackChunkName: "components/group_list_sort_options_popover" */'../../../components/popover/group_list_sort_options_popover') }
 export function GroupMemberOptionsPopover() { return import(/* webpackChunkName: "components/group_member_options_popover" */'../../../components/popover/group_member_options_popover') }
 export function GroupMembers() { return import(/* webpackChunkName: "features/group_members" */'../../group_members') }
 export function GroupOptionsPopover() { return import(/* webpackChunkName: "components/group_options_popover" */'../../../components/popover/group_options_popover') }
+export function GroupsPanel() { return import(/* webpackChunkName: "components/groups_panel" */'../../../components/panel/groups_panel') }
 export function GroupRemovedAccounts() { return import(/* webpackChunkName: "features/group_removed_accounts" */'../../group_removed_accounts') }
 export function GroupTimeline() { return import(/* webpackChunkName: "features/group_timeline" */'../../group_timeline') }
 export function GroupTimelineSortOptionsPopover() { return import(/* webpackChunkName: "components/group_timeline_sort_options_popover" */'../../../components/popover/group_timeline_sort_options_popover') }
@@ -47,36 +51,51 @@ export function HomeTimelineSettingsModal() { return import(/* webpackChunkName:
 export function HotkeysModal() { return import(/* webpackChunkName: "components/hotkeys_modal" */'../../../components/modal/hotkeys_modal') }
 export function Introduction() { return import(/* webpackChunkName: "features/introduction" */'../../introduction') }
 export function Investors() { return import(/* webpackChunkName: "features/about/investors" */'../../about/investors') }
+export function LinkFooter() { return import(/* webpackChunkName: "components/link_footer" */'../../../components/link_footer') }
 export function ListAddUserModal() { return import(/* webpackChunkName: "features/list_add_user_modal" */'../../../components/modal/list_add_user_modal') }
 export function ListCreate() { return import(/* webpackChunkName: "features/list_create" */'../../list_create') }
 export function ListCreateModal() { return import(/* webpackChunkName: "components/list_create_modal" */'../../../components/modal/list_create_modal') }
 export function ListDeleteModal() { return import(/* webpackChunkName: "components/list_delete_modal" */'../../../components/modal/list_delete_modal') }
+export function ListDetailsPanel() { return import(/* webpackChunkName: "components/list_details_panel" */'../../../components/panel/list_details_panel') }
 export function ListsDirectory() { return import(/* webpackChunkName: "features/lists_directory" */'../../lists_directory') }
 export function ListEdit() { return import(/* webpackChunkName: "features/list_editor" */'../../list_edit') }
 export function ListEditorModal() { return import(/* webpackChunkName: "components/list_editor_modal" */'../../../components/modal/list_editor_modal') }
+export function ListsPanel() { return import(/* webpackChunkName: "components/lists_panel" */'../../../components/panel/lists_panel') }
 export function ListTimeline() { return import(/* webpackChunkName: "features/list_timeline" */'../../list_timeline') }
 export function ListTimelineSettingsModal() { return import(/* webpackChunkName: "components/list_timeline_settings_modal" */'../../../components/modal/list_timeline_settings_modal') }
 export function MediaGallery() { return import(/* webpackChunkName: "components/media_gallery" */'../../../components/media_gallery') }
+export function MediaGalleryPanel() { return import(/* webpackChunkName: "components/media_gallery_panel" */'../../../components/panel/media_gallery_panel') }
 export function MediaModal() { return import(/* webpackChunkName: "components/media_modal" */'../../../components/modal/media_modal') }
 export function Mutes() { return import(/* webpackChunkName: "features/mutes" */'../../mutes') }
 export function MuteModal() { return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal/mute_modal') }
 export function NavSettingsPopover() { return import(/* webpackChunkName: "modals/nav_settings_popover" */'../../../components/popover/nav_settings_popover') }
 export function News() { return import(/* webpackChunkName: "features/news" */'../../news') }
 export function Notifications() { return import(/* webpackChunkName: "features/notifications" */'../../notifications') }
+export function NotificationFilterPanel() { return import(/* webpackChunkName: "components/notification_filter_panel" */'../../../components/panel/notification_filter_panel') }
 export function PrivacyPolicy() { return import(/* webpackChunkName: "features/about/privacy_policy" */'../../about/privacy_policy') }
 export function ProTimeline() { return import(/* webpackChunkName: "features/pro_timeline" */'../../pro_timeline') }
 export function ProfileOptionsPopover() { return import(/* webpackChunkName: "components/profile_options_popover" */'../../../components/popover/profile_options_popover') }
+export function ProfileInfoPanel() { return import(/* webpackChunkName: "components/profile_info_panel" */'../../../components/panel/profile_info_panel') }
+export function ProfileStatsPanel() { return import(/* webpackChunkName: "components/profile_info_panel" */'../../../components/panel/profile_stats_panel') }
+export function ProgressPanel() { return import(/* webpackChunkName: "components/progress_panel" */'../../../components/panel/progress_panel') }
+export function ProPanel() { return import(/* webpackChunkName: "components/pro_panel" */'../../../components/panel/pro_panel') }
 export function ProUpgradeModal() { return import(/* webpackChunkName: "components/pro_upgrade_modal" */'../../../components/modal/pro_upgrade_modal') }
 export function ReportModal() { return import(/* webpackChunkName: "modals/report_modal" */'../../../components/modal/report_modal') }
 export function Search() { return import(/*webpackChunkName: "features/search" */'../../search') }
 export function Shortcuts() { return import(/*webpackChunkName: "features/shortcuts" */'../../shortcuts') }
 export function Status() { return import(/* webpackChunkName: "components/status" */'../../../components/status') }
 export function StatusFeature() { return import(/* webpackChunkName: "features/status" */'../../status') }
+export function SearchFilterPanel() { return import(/* webpackChunkName: "components/search_filter_panel" */'../../../components/panel/search_filter_panel') }
 export function SearchPopover() { return import(/* webpackChunkName: "components/search_popover" */'../../../components/popover/search_popover') }
+export function ShopPanel() { return import(/* webpackChunkName: "components/shop_panel" */'../../../components/panel/shop_panel') }
 export function SidebarMorePopover() { return import(/* webpackChunkName: "components/sidebar_more_popover" */'../../../components/popover/sidebar_more_popover') }
+export function SignUpLogInPanel() { return import(/* webpackChunkName: "components/sign_up_log_in_panel" */'../../../components/panel/sign_up_log_in_panel') }
+export function SidebarXS() { return import(/* webpackChunkName: "components/sidebar_xs" */'../../../components/sidebar_xs') }
+export function SignUpPanel() { return import(/* webpackChunkName: "components/sign_up_panel" */'../../../components/panel/sign_up_panel') }
 export function StatusExpirationOptionsPopover() { return import(/* webpackChunkName: "components/status_expiration_options_popover" */'../../../components/popover/status_expiration_options_popover') }
 export function StatusLikes() { return import(/* webpackChunkName: "features/status_likes" */'../../status_likes') }
 export function StatusOptionsPopover() { return import(/* webpackChunkName: "components/status_options_popover" */'../../../components/popover/status_options_popover') }
+export function StatusPromotionPanel() { return import(/* webpackChunkName: "components/status_promotion_panel" */'../../../components/panel/status_promotion_panel') }
 export function StatusReposts() { return import(/* webpackChunkName: "features/status_reposts" */'../../status_reposts') }
 export function StatusLikesModal() { return import(/* webpackChunkName: "modals/status_likes_modal" */'../../../components/modal/status_likes_modal') }
 export function StatusRepostsModal() { return import(/* webpackChunkName: "modals/status_reposts_modal" */'../../../components/modal/status_reposts_modal') }
@@ -84,9 +103,13 @@ export function StatusRevisionsModal() { return import(/* webpackChunkName: "mod
 export function StatusVisibilityPopover() { return import(/* webpackChunkName: "components/status_visibility_popover" */'../../../components/popover/status_visibility_popover') }
 export function TermsOfSale() { return import(/* webpackChunkName: "features/about/terms_of_sale" */'../../about/terms_of_sale') }
 export function TermsOfService() { return import(/* webpackChunkName: "features/about/terms_of_service" */'../../about/terms_of_service') }
+export function TrendsPanel() { return import(/* webpackChunkName: "components/trends_panel" */'../../../components/panel/trends_panel') }
 export function UnauthorizedModal() { return import(/* webpackChunkName: "components/unauthorized_modal" */'../../../components/modal/unauthorized_modal') }
 export function UnfollowModal() { return import(/* webpackChunkName: "components/unfollow_modal" */'../../../components/modal/unfollow_modal') }
 export function UserInfoPopover() { return import(/* webpackChunkName: "components/user_info_popover" */'../../../components/popover/user_info_popover') }
+export function UserPanel() { return import(/* webpackChunkName: "components/user_panel" */'../../../components/panel/user_panel') }
+export function VerifiedAccountsPanel() { return import(/* webpackChunkName: "components/verified_accounts_panel" */'../../../components/panel/verified_accounts_panel') }
 export function Video() { return import(/* webpackChunkName: "components/video" */'../../../components/video') }
 export function VideoModal() { return import(/* webpackChunkName: "components/video_modal" */'../../../components/modal/video_modal') }
-export function VideoStatsPopover() { return import(/* webpackChunkName: "components/video_stats_popover" */'../../../components/popover/video_stats_popover') }
\ No newline at end of file
+export function VideoStatsPopover() { return import(/* webpackChunkName: "components/video_stats_popover" */'../../../components/popover/video_stats_popover') }
+export function WhoToFollowPanel() { return import(/* webpackChunkName: "components/who_to_follow_panel" */'../../../components/panel/who_to_follow_panel') }
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/ui/util/wrapped_bundle.js b/app/javascript/gabsocial/features/ui/util/wrapped_bundle.js
new file mode 100644
index 00000000..95006fbe
--- /dev/null
+++ b/app/javascript/gabsocial/features/ui/util/wrapped_bundle.js
@@ -0,0 +1,40 @@
+import Bundle from './bundle'
+
+class WrappedBundle extends PureComponent {
+
+  render() {
+    const {
+      component,
+      componentParams,
+      errorComponent,
+      loadingComponent,
+    } = this.props
+
+    console.log("WrappedBundle:", this.props)
+
+    return (
+      <Bundle
+        fetchComponent={component}
+        loading={loadingComponent}
+        error={errorComponent}
+      >
+        {
+          Component =>
+          (
+            <Component {...componentParams} />
+          )
+        }
+      </Bundle>
+    )
+  }
+
+}
+
+WrappedBundle.propTypes = {
+  component: PropTypes.func.isRequired,
+  componentParams: PropTypes.object,
+  errorComponent: PropTypes.object,
+  loadingComponent: PropTypes.object,
+}
+
+export default WrappedBundle
\ No newline at end of file
diff --git a/app/javascript/gabsocial/layouts/about_layout.js b/app/javascript/gabsocial/layouts/about_layout.js
index 190c9a8c..7fb279e4 100644
--- a/app/javascript/gabsocial/layouts/about_layout.js
+++ b/app/javascript/gabsocial/layouts/about_layout.js
@@ -3,14 +3,17 @@ import {
   BREAKPOINT_EXTRA_SMALL,
 } from '../constants'
 import { me } from '../initial_state'
-import SidebarXS from '../components/sidebar_xs'
 import NavigationBar from '../components/navigation_bar'
 import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
 import FooterBar from '../components/footer_bar'
-import GlobalFooter from '../components/global_footer'
 import Responsive from '../features/ui/util/responsive_component'
 import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
-import AboutSidebar from '../components/about_sidebar'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import {
+  AboutSidebar,
+  GlobalFooter,
+  SidebarXS,
+} from '../features/ui/util/async_components'
 
 export default class SettingsLayout extends PureComponent {
 
@@ -73,7 +76,7 @@ export default class SettingsLayout extends PureComponent {
       <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgPrimary].join(' ')}>
 
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <SidebarXS />
+          <WrappedBundle component={SidebarXS} />
         </Responsive>
 
         {
@@ -88,7 +91,7 @@ export default class SettingsLayout extends PureComponent {
         <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
 
           <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-            <AboutSidebar title={title} items={menuItems} />
+            <WrappedBundle component={AboutSidebar} componentParams={{ title, items: menuItems }} />
           </Responsive>
 
           <ResponsiveClassesComponent
@@ -106,7 +109,7 @@ export default class SettingsLayout extends PureComponent {
                 <div className={[_s.default, _s.width1015PX, _s.z1].join(' ')}>
 
                   <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-                    <AboutSidebar title={title} items={menuItems} />
+                    <WrappedBundle component={AboutSidebar} componentParams={{ title, items: menuItems }} />
                   </Responsive>
       
                   <div className={_s.default}>
@@ -120,7 +123,7 @@ export default class SettingsLayout extends PureComponent {
           </ResponsiveClassesComponent>
         </div>
 
-        <GlobalFooter />
+        <WrappedBundle component={GlobalFooter} />
 
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
           <FooterBar />
diff --git a/app/javascript/gabsocial/layouts/explore_layout.js b/app/javascript/gabsocial/layouts/explore_layout.js
index 0d0a1092..5d30e5e2 100644
--- a/app/javascript/gabsocial/layouts/explore_layout.js
+++ b/app/javascript/gabsocial/layouts/explore_layout.js
@@ -4,12 +4,15 @@ import throttle from 'lodash.throttle'
 import Sticky from 'react-stickynode'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import Layout from './layout'
-import TrendsPanel from '../components/panel/trends_panel'
-import GroupSidebarPanel from '../components/panel/groups_panel'
-import SignUpLogInPanel from '../components/panel/sign_up_log_in_panel'
 import SidebarPanelGroup from '../components/sidebar_panel_group'
 import Responsive from '../features/ui/util/responsive_component'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
 import Heading from '../components/heading'
+import {
+  GroupSidebarPanel,
+  SignUpLogInPanel,
+  TrendsPanel,
+} from '../features/ui/util/async_components'
 
 export default class ExploreLayout extends ImmutablePureComponent {
 
@@ -105,9 +108,9 @@ export default class ExploreLayout extends ImmutablePureComponent {
                     <SidebarPanelGroup
                       page='explore'
                       layout={[
-                        <SignUpLogInPanel key='explore-page-signup-login-panel' />,
-                        <GroupSidebarPanel groupType='featured' key='explore-page-group-panel' />,
-                        <TrendsPanel key='explore-page-trends-panel' isLazy shouldLoad={lazyLoaded} />,
+                        SignUpLogInPanel,
+                        <WrappedBundle component={GroupSidebarPanel} componentParams={{ groupType: 'featured' }} />,
+                        <WrappedBundle component={TrendsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />,
                       ]}
                     />
                   </div>
diff --git a/app/javascript/gabsocial/layouts/group_layout.js b/app/javascript/gabsocial/layouts/group_layout.js
index 523ba25f..baecd77d 100644
--- a/app/javascript/gabsocial/layouts/group_layout.js
+++ b/app/javascript/gabsocial/layouts/group_layout.js
@@ -3,13 +3,16 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import Sticky from 'react-stickynode'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import Layout from './layout'
-import GroupInfoPanel from '../components/panel/group_info_panel'
-import GroupSidebarPanel from '../components/panel/groups_panel'
-import SignupPanel from '../components/panel/sign_up_panel'
-import LinkFooter from '../components/link_footer'
 import GroupHeader from '../components/group_header'
 import SidebarPanelGroup from '../components/sidebar_panel_group'
-import Responsive from '../features/ui/util/responsive_component';
+import Responsive from '../features/ui/util/responsive_component'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import {
+  LinkFooter,
+  SignUpPanel,
+  GroupSidebarPanel,
+  GroupInfoPanel,
+} from '../features/ui/util/async_components'
 
 export default class GroupLayout extends ImmutablePureComponent {
 
@@ -77,10 +80,10 @@ export default class GroupLayout extends ImmutablePureComponent {
                     <SidebarPanelGroup
                       page={`group.${groupId}`}
                       layout={[
-                        <GroupInfoPanel group={group} key='group-page-info-panel' />,
-                        <SignupPanel key='group-page-signup-panel' />,
-                        <GroupSidebarPanel isSlim key='group-page-group-panel' />,
-                        <LinkFooter key='group-page-link-footer' />,
+                        <WrappedBundle component={GroupInfoPanel} componentParams={{ group }} />,
+                        SignUpPanel,
+                        GroupSidebarPanel,
+                        LinkFooter,
                       ]}
                     />
                   </div>
diff --git a/app/javascript/gabsocial/layouts/profile_layout.js b/app/javascript/gabsocial/layouts/profile_layout.js
index a16e5539..50534bf5 100644
--- a/app/javascript/gabsocial/layouts/profile_layout.js
+++ b/app/javascript/gabsocial/layouts/profile_layout.js
@@ -4,19 +4,22 @@ import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import Sticky from 'react-stickynode'
 import { me } from '../initial_state'
 import { CX } from '../constants'
-import LinkFooter from '../components/link_footer'
-import ProfileStatsPanel from '../components/panel/profile_stats_panel'
-import ProfileInfoPanel from '../components/panel/profile_info_panel'
-import MediaGalleryPanel from '../components/panel/media_gallery_panel'
-import SignUpPanel from '../components/panel/sign_up_panel'
 import NavigationBar from '../components/navigation_bar'
 import FooterBar from '../components/footer_bar'
 import ProfileHeader from '../components/profile_header'
 import FloatingActionButton from '../components/floating_action_button'
 import ProfileNavigationBar from '../components/profile_navigation_bar'
 import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
-import Responsive from '../features/ui/util/responsive_component';
-import Divider from '../components/divider';
+import Responsive from '../features/ui/util/responsive_component'
+import Divider from '../components/divider'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import {
+  LinkFooter,
+  ProfileStatsPanel,
+  ProfileInfoPanel,
+  MediaGalleryPanel,
+  SignUpPanel,
+} from '../features/ui/util/async_components'
 
 export default class ProfileLayout extends ImmutablePureComponent {
 
@@ -64,9 +67,9 @@ export default class ProfileLayout extends ImmutablePureComponent {
                 <div className={[_s.default, _s.z1, _s.width100PC, _s.alignItemsCenter].join(' ')}>
 
                   <ProfileHeader account={account} isXS>
-                    <ProfileInfoPanel account={account} noPanel />
+                    <WrappedBundle component={ProfileInfoPanel} componentParams={{ account }} />
                     <Divider isSmall />
-                    <ProfileStatsPanel account={account} noPanel />
+                    <WrappedBundle component={ProfileStatsPanel} componentParams={{ account }} />
                   </ProfileHeader>
 
                   <div className={[_s.default, _s.width100PC, , _s.flexRow, _s.justifyContentEnd, _s.py15].join(' ')}>
@@ -116,11 +119,11 @@ export default class ProfileLayout extends ImmutablePureComponent {
                       <div className={[_s.default, _s.width340PX, _s.mr15].join(' ')}>
                         <Sticky top={63} enabled>
                           <div className={[_s.default, _s.width340PX].join(' ')}>
-                            <ProfileStatsPanel account={account} />
-                            <ProfileInfoPanel account={account} />
-                            { !unavailable && <MediaGalleryPanel account={account} /> }
-                            <SignUpPanel />
-                            <LinkFooter />
+                            <WrappedBundle component={ProfileStatsPanel} componentParams={{ account }} />
+                            <WrappedBundle component={ProfileInfoPanel} componentParams={{ account }} />
+                            { !unavailable && <WrappedBundle component={MediaGalleryPanel} componentParams={{ account }} /> }
+                            { !me && <WrappedBundle component={SignUpPanel} /> }
+                            <WrappedBundle component={LinkFooter} />
                           </div>
                         </Sticky>
                       </div>
diff --git a/app/javascript/gabsocial/layouts/settings_layout.js b/app/javascript/gabsocial/layouts/settings_layout.js
index a3c10f5a..aca9cbd1 100644
--- a/app/javascript/gabsocial/layouts/settings_layout.js
+++ b/app/javascript/gabsocial/layouts/settings_layout.js
@@ -3,12 +3,15 @@ import {
   BREAKPOINT_EXTRA_SMALL,
 } from '../constants'
 import { me } from '../initial_state'
-import SidebarXS from '../components/sidebar_xs'
 import NavigationBar from '../components/navigation_bar'
 import FooterBar from '../components/footer_bar'
 import Responsive from '../features/ui/util/responsive_component'
 import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
 import SettingsSidebar from '../components/settings_sidebar'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import {
+  SidebarXS,
+} from '../features/ui/util/async_components'
 
 export default class SettingsLayout extends PureComponent {
 
@@ -33,7 +36,7 @@ export default class SettingsLayout extends PureComponent {
       <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
 
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <SidebarXS />
+          <WrappedBundle component={SidebarXS} />
         </Responsive>
 
         <NavigationBar
diff --git a/app/javascript/gabsocial/pages/basic_page.js b/app/javascript/gabsocial/pages/basic_page.js
index 885d2411..b926cb5b 100644
--- a/app/javascript/gabsocial/pages/basic_page.js
+++ b/app/javascript/gabsocial/pages/basic_page.js
@@ -1,8 +1,10 @@
 import PageTitle from '../features/ui/util/page_title'
 import DefaultLayout from '../layouts/default_layout'
-import LinkFooter from '../components/link_footer'
-import TrendsPanel from '../components/panel/trends_panel'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
+import {
+  LinkFooter,
+  TrendsPanel,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 export default class BasicPage extends PureComponent {
 
@@ -26,9 +28,9 @@ export default class BasicPage extends PureComponent {
         title={title}
         page={page}
         layout={[
-          <TrendsPanel key='basic-page-trends-panel' />,
-          <WhoToFollowPanel key='basic-page-wtf-panel' />,
-          <LinkFooter key='basic-page-link-footer' />,
+          TrendsPanel,
+          WhoToFollowPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={title} />
diff --git a/app/javascript/gabsocial/pages/community_page.js b/app/javascript/gabsocial/pages/community_page.js
index 66a7f4ad..a6aa8f3a 100644
--- a/app/javascript/gabsocial/pages/community_page.js
+++ b/app/javascript/gabsocial/pages/community_page.js
@@ -1,12 +1,14 @@
 import { defineMessages, injectIntl } from 'react-intl'
 import { openModal } from '../actions/modal'
 import PageTitle from '../features/ui/util/page_title'
-import GroupSidebarPanel from '../components/panel/groups_panel'
-import LinkFooter from '../components/link_footer'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import ProgressPanel from '../components/panel/progress_panel'
-import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
+import {
+  LinkFooter,
+  GroupSidebarPanel,
+  ProgressPanel,
+  TrendsPanel,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   community: { 'id': 'column.community', 'defaultMessage': 'Community feed' },
@@ -45,11 +47,11 @@ class CommunityPage extends PureComponent {
           },
         ]}
         layout={[
-          <ProgressPanel key='community-page-progress-panel' />,
-          <TrendsPanel key='community-page-progress-panel' />,
-          <WhoToFollowPanel key='community-page-wtf-panel' />,
-          <GroupSidebarPanel key='community-page-groups-panel' />,
-          <LinkFooter key='community-page-link-footer' />,
+          ProgressPanel,
+          TrendsPanel,
+          WhoToFollowPanel,
+          GroupSidebarPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={title} />
diff --git a/app/javascript/gabsocial/pages/groups_page.js b/app/javascript/gabsocial/pages/groups_page.js
index 6531c5c8..12e7e04f 100644
--- a/app/javascript/gabsocial/pages/groups_page.js
+++ b/app/javascript/gabsocial/pages/groups_page.js
@@ -2,11 +2,14 @@ import { Fragment } from 'react'
 import { me } from '../initial_state'
 import { defineMessages, injectIntl } from 'react-intl'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
 import Text from '../components/text'
-import GroupsPanel from '../components/panel/groups_panel'
 import DefaultLayout from '../layouts/default_layout'
 import GroupsCollection from '../features/groups_collection'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import {
+  GroupsPanel,
+  LinkFooter,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   groups: { id: 'groups', defaultMessage: 'Groups' },
@@ -80,9 +83,9 @@ class GroupsPage extends PureComponent {
     
     const layout = []
     if (!!me) {
-      layout.push(<GroupsPanel key='groups-page-groups-panel' groupType='member' />)
+      layout.push(<WrappedBundle component={GroupsPanel} componentParams={{ groupType: 'member' }} />)
     }
-    layout.push(<LinkFooter key='groups-page-link-footer' />)
+    layout.push(LinkFooter)
 
     return (
       <DefaultLayout
diff --git a/app/javascript/gabsocial/pages/hashtag_page.js b/app/javascript/gabsocial/pages/hashtag_page.js
index 66b77eb0..9ebda8e4 100644
--- a/app/javascript/gabsocial/pages/hashtag_page.js
+++ b/app/javascript/gabsocial/pages/hashtag_page.js
@@ -2,11 +2,13 @@ import { openModal } from '../actions/modal'
 import { defineMessages, injectIntl } from 'react-intl'
 import isObject from 'lodash.isobject'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import ProgressPanel from '../components/panel/progress_panel'
-import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
+import {
+  LinkFooter,
+  ProgressPanel,
+  TrendsPanel,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   hashtag: { id: 'hashtag', defaultMessage: 'Hashtag' },
@@ -54,10 +56,10 @@ class HashtagPage extends PureComponent {
           },
         ]}
         layout={[
-          <ProgressPanel key='hashtag-page-progress-panel' />,
-          <TrendsPanel key='hashtag-page-trends-panel' />,
-          <WhoToFollowPanel key='hashtag-page-wtf-panel' />,
-          <LinkFooter key='hashtag-page-link-footer' />,
+          ProgressPanel,
+          TrendsPanel,
+          WhoToFollowPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={intl.formatMessage(messages.hashtag)} />
diff --git a/app/javascript/gabsocial/pages/home_page.js b/app/javascript/gabsocial/pages/home_page.js
index c1e31376..8bb66ab3 100644
--- a/app/javascript/gabsocial/pages/home_page.js
+++ b/app/javascript/gabsocial/pages/home_page.js
@@ -4,19 +4,22 @@ import { defineMessages, injectIntl } from 'react-intl'
 import { MODAL_HOME_TIMELINE_SETTINGS } from '../constants'
 import { me } from '../initial_state'
 import PageTitle from '../features/ui/util/page_title'
-import GroupsPanel from '../components/panel/groups_panel'
-import ListsPanel from '../components/panel/lists_panel'
-import LinkFooter from '../components/link_footer'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import ShopPanel from '../components/panel/shop_panel'
-import ProgressPanel from '../components/panel/progress_panel'
-import ProPanel from '../components/panel/pro_panel'
-import UserPanel from '../components/panel/user_panel'
-import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
 import TimelineComposeBlock from '../components/timeline_compose_block'
 import Divider from '../components/divider'
 import PullToRefresher from '../components/pull_to_refresher'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import {
+  UserPanel,
+  GroupsPanel,
+  LinkFooter,
+  ListsPanel,
+  TrendsPanel,
+  WhoToFollowPanel,
+  ProPanel,
+  ShopPanel,
+  ProgressPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   home: { id: 'home', defaultMessage: 'Home' },
@@ -99,15 +102,15 @@ class HomePage extends PureComponent {
           },
         ]}
         layout={[
-          <UserPanel key='home-page-user-panel' />,
-          <ProgressPanel key='home-page-progress-panel' />,
-          <ProPanel isPro={isPro} key='home-page-pro-panel' />,
-          <TrendsPanel key='home-page-trends-panel' />,
-          <ShopPanel isLazy shouldLoad={lazyLoaded} key='home-page-shop-panel' />,
-          <ListsPanel isLazy shouldLoad={lazyLoaded} key='home-page-lists-panel' />,
-          <WhoToFollowPanel isLazy shouldLoad={lazyLoaded} key='home-page-wtf-panel' />,
-          <GroupsPanel isLazy shouldLoad={lazyLoaded} key='home-page-groups-panel' />,
-          <LinkFooter key='home-page-link-footer' />,
+          UserPanel,
+          ProgressPanel,
+          <WrappedBundle component={ProPanel} componentParams={{ isPro: isPro }} />,
+          TrendsPanel,
+          <WrappedBundle component={ShopPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }}  />,
+          <WrappedBundle component={ListsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }}  />,
+          <WrappedBundle component={WhoToFollowPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }}  />,
+          <WrappedBundle component={GroupsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded, groupType: 'member' }}  />,
+          LinkFooter,
         ]}
       >
 
diff --git a/app/javascript/gabsocial/pages/list_page.js b/app/javascript/gabsocial/pages/list_page.js
index aabb9d73..e2d3ea8c 100644
--- a/app/javascript/gabsocial/pages/list_page.js
+++ b/app/javascript/gabsocial/pages/list_page.js
@@ -7,11 +7,14 @@ import {
   // MODAL_LIST_TIMELINE_SETTINGS,
 } from '../constants'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
 import DefaultLayout from '../layouts/default_layout'
-import ListDetailsPanel from '../components/panel/list_details_panel'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import TrendsPanel from '../components/panel/trends_panel'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+import {
+  ListDetailsPanel,
+  LinkFooter,
+  TrendsPanel,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   list: { id: 'list', defaultMessage: 'List' },
@@ -77,10 +80,10 @@ class ListPage extends ImmutablePureComponent {
           // },
         ]}
         layout={[
-          <ListDetailsPanel list={list} onEdit={this.handleOnOpenListEditModal} key='list-page-list-panel' />,
-          <TrendsPanel key='list-page-trends-panel' />,
-          <WhoToFollowPanel key='list-page-wtf-panel' />,
-          <LinkFooter key='list-page-link-footer' />,
+          <WrappedBundle component={ListDetailsPanel} componentParams={{ list: list, onEdit: this.handleOnOpenListEditModal }} />,
+          TrendsPanel,
+          WhoToFollowPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={[title, intl.formatMessage(messages.list)]} />
diff --git a/app/javascript/gabsocial/pages/lists_page.js b/app/javascript/gabsocial/pages/lists_page.js
index d54d566a..febce807 100644
--- a/app/javascript/gabsocial/pages/lists_page.js
+++ b/app/javascript/gabsocial/pages/lists_page.js
@@ -1,10 +1,12 @@
 import { openModal } from '../actions/modal'
 import { defineMessages, injectIntl } from 'react-intl'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
+import {
+  LinkFooter,
+  TrendsPanel,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   lists: { id: 'lists', defaultMessage: 'Lists' },
@@ -45,9 +47,9 @@ class ListsPage extends PureComponent {
           },
         ]}
         layout={[
-          <TrendsPanel key='lists-page-trends-panel' />,
-          <WhoToFollowPanel key='lists-page-wtf-panel' />,
-          <LinkFooter key='lists-page-link-footer' />,
+          TrendsPanel,
+          WhoToFollowPanel,
+          LinkFooter,
         ]}
         showBackBtn
       >
diff --git a/app/javascript/gabsocial/pages/modal_page.js b/app/javascript/gabsocial/pages/modal_page.js
index 30959515..052a4d92 100644
--- a/app/javascript/gabsocial/pages/modal_page.js
+++ b/app/javascript/gabsocial/pages/modal_page.js
@@ -1,8 +1,10 @@
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
 import Block from '../components/block'
 import DefaultLayout from '../layouts/default_layout'
+import {
+  LinkFooter,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 export default class ModalPage extends PureComponent {
 
@@ -23,11 +25,11 @@ export default class ModalPage extends PureComponent {
       <DefaultLayout
         title={title}
         page={page}
-        layout={[
-          <WhoToFollowPanel key='modal-page-wtf-panel' />,
-          <LinkFooter key='search-page-link-footer' />,
-        ]}
         showBackBtn
+        layout={[
+          WhoToFollowPanel,
+          LinkFooter,
+        ]}
       >
         <PageTitle path={title} />
         
diff --git a/app/javascript/gabsocial/pages/news_page.js b/app/javascript/gabsocial/pages/news_page.js
index 48e6d7c8..632adaad 100644
--- a/app/javascript/gabsocial/pages/news_page.js
+++ b/app/javascript/gabsocial/pages/news_page.js
@@ -1,10 +1,12 @@
 import PageTitle from '../features/ui/util/page_title'
 import DefaultLayout from '../layouts/default_layout'
-import ProgressPanel from '../components/panel/progress_panel'
-import VerifiedAccountsPanel from '../components/panel/verified_accounts_panel'
-import ShopPanel from '../components/panel/shop_panel'
-import SignupPanel from '../components/panel/sign_up_panel'
-import LinkFooter from '../components/link_footer'
+import {
+  LinkFooter,
+  ProgressPanel,
+  ShopPanel,
+  SignUpPanel,
+  VerifiedAccountsPanel,
+} from '../features/ui/util/async_components'
 
 export default class NewsPage extends PureComponent {
 
@@ -23,11 +25,11 @@ export default class NewsPage extends PureComponent {
         noComposeButton
         showBackBtn
         layout={[
-          <SignupPanel key='explore-page-signup-panel' />,
-          <ProgressPanel key='explore-page-progress-panel' />,
-          <VerifiedAccountsPanel key='explore-page-verified-panel' />,
-          <ShopPanel key='explore-page-shop-panel' />,
-          <LinkFooter key='explore-page-link-footer' />,
+          SignUpPanel,
+          ProgressPanel,
+          VerifiedAccountsPanel,
+          ShopPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={title} />
diff --git a/app/javascript/gabsocial/pages/notifications_page.js b/app/javascript/gabsocial/pages/notifications_page.js
index aaccb439..307fbc77 100644
--- a/app/javascript/gabsocial/pages/notifications_page.js
+++ b/app/javascript/gabsocial/pages/notifications_page.js
@@ -4,11 +4,13 @@ import { setFilter } from '../actions/notifications'
 import { me } from '../initial_state'
 import { NOTIFICATION_FILTERS } from '../constants'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import NotificationFilterPanel from '../components/panel/notification_filter_panel'
-import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
+import {
+  LinkFooter,
+  NotificationFilterPanel,
+  TrendsPanel,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
@@ -88,10 +90,10 @@ class NotificationsPage extends PureComponent {
         title={intl.formatMessage(messages.notifications)}
         page='notifications'
         layout={[
-          <NotificationFilterPanel key='notification-page-filter-panel' />,
-          <TrendsPanel key='notification-page-trends-panel' />,
-          <WhoToFollowPanel key='notification-page-wtf-panel' />,
-          <LinkFooter key='notification-page-link-footer' />,
+          NotificationFilterPanel,
+          TrendsPanel,
+          WhoToFollowPanel,
+          LinkFooter,
         ]}
         tabs={tabs}
       >
diff --git a/app/javascript/gabsocial/pages/pro_page.js b/app/javascript/gabsocial/pages/pro_page.js
index 3eb19162..621b6e68 100644
--- a/app/javascript/gabsocial/pages/pro_page.js
+++ b/app/javascript/gabsocial/pages/pro_page.js
@@ -1,9 +1,11 @@
 import { defineMessages, injectIntl } from 'react-intl'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
-import VerifiedAccountsPanel from '../components/panel/verified_accounts_panel'
-import ProgressPanel from '../components/panel/progress_panel'
 import DefaultLayout from '../layouts/default_layout'
+import {
+  LinkFooter,
+  VerifiedAccountsPanel,
+  ProgressPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   title: { 'id': 'column.pro', 'defaultMessage': 'Pro feed' },
@@ -28,9 +30,9 @@ class ProPage extends PureComponent {
         title={title}
         page='pro'
         layout={[
-          <ProgressPanel key='pro-page-progress-panel' />,
-          <VerifiedAccountsPanel key='pro-page-verified-panel' />,
-          <LinkFooter key='pro-page-link-footer' />,
+          ProgressPanel,
+          VerifiedAccountsPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={title} />
diff --git a/app/javascript/gabsocial/pages/search_page.js b/app/javascript/gabsocial/pages/search_page.js
index c5d01573..801acc2e 100644
--- a/app/javascript/gabsocial/pages/search_page.js
+++ b/app/javascript/gabsocial/pages/search_page.js
@@ -2,12 +2,14 @@ import { defineMessages, injectIntl } from 'react-intl'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import Responsive from '../features/ui/util/responsive_component'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
-import SearchFilterPanel from '../components/panel/search_filter_panel'
-import TrendsPanel from '../components/panel/trends_panel'
-import SignupPanel from '../components/panel/sign_up_panel'
 import Search from '../components/search'
 import Layout from '../layouts/layout'
+import {
+  LinkFooter,
+  TrendsPanel,
+  SearchFilterPanel,
+  SignUpPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   search: { id: 'search', defaultMessage: 'Search' },
@@ -65,10 +67,10 @@ class SearchPage extends PureComponent {
         tabs={tabs}
         page={`search.${qos}`}
         layout={[
-          <SignupPanel key='search-page-signup-panel' />,
-          <SearchFilterPanel key='search-page-search-panel' />,
-          <TrendsPanel key='search-page-trends-panel' />,
-          <LinkFooter key='search-page-link-footer' />,
+          SignUpPanel,
+          SearchFilterPanel,
+          TrendsPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={title} />
diff --git a/app/javascript/gabsocial/pages/shortcuts_page.js b/app/javascript/gabsocial/pages/shortcuts_page.js
index 9fa58ee5..cf96330c 100644
--- a/app/javascript/gabsocial/pages/shortcuts_page.js
+++ b/app/javascript/gabsocial/pages/shortcuts_page.js
@@ -2,10 +2,12 @@ import { defineMessages, injectIntl } from 'react-intl'
 import { openModal } from '../actions/modal'
 import { MODAL_EDIT_SHORTCUTS } from '../constants'
 import PageTitle from '../features/ui/util/page_title'
-import LinkFooter from '../components/link_footer'
-import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
+import {
+  LinkFooter,
+  TrendsPanel,
+  WhoToFollowPanel,
+} from '../features/ui/util/async_components'
 
 const messages = defineMessages({
   shortcuts: { id: 'shortcuts', defaultMessage: 'Shortcuts' },
@@ -47,9 +49,9 @@ class ShortcutsPage extends PureComponent {
           },
         ]}
         layout={[
-          <TrendsPanel key='shortcuts-page-trends-panel' />,
-          <WhoToFollowPanel key='shortcuts-page-wtf-panel' />,
-          <LinkFooter key='shortcuts-page-link-footer' />,
+          TrendsPanel,
+          WhoToFollowPanel,
+          LinkFooter,
         ]}
       >
         <PageTitle path={title} />