diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js
index d7543e842..489554014 100644
--- a/app/soapbox/features/ui/util/async-components.js
+++ b/app/soapbox/features/ui/util/async-components.js
@@ -282,6 +282,10 @@ export function ScheduleForm() {
return import(/* webpackChunkName: "features/compose" */'../../compose/components/schedule_form');
}
+export function WhoToFollowPanel() {
+ return import(/* webpackChunkName: "features/follow_recommendations" */'../components/who_to_follow_panel');
+}
+
export function FollowRecommendations() {
return import(/* webpackChunkName: "features/follow_recommendations" */'../../follow_recommendations');
}
diff --git a/app/soapbox/pages/default_page.js b/app/soapbox/pages/default_page.js
index 71bfa96a2..6417e483e 100644
--- a/app/soapbox/pages/default_page.js
+++ b/app/soapbox/pages/default_page.js
@@ -1,7 +1,8 @@
import React from 'react';
import { connect } from 'react-redux';
import ImmutablePureComponent from 'react-immutable-pure-component';
-import WhoToFollowPanel from 'soapbox/features/ui/components/who_to_follow_panel';
+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';
@@ -45,7 +46,11 @@ class DefaultPage extends ImmutablePureComponent {
{me ?
:
}
{showTrendsPanel &&
}
- {showWhoToFollowPanel &&
}
+ {showWhoToFollowPanel && (
+
+ {Component => }
+
+ )}
diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js
index 5ed036719..0188a766b 100644
--- a/app/soapbox/pages/home_page.js
+++ b/app/soapbox/pages/home_page.js
@@ -6,11 +6,10 @@ 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 WhoToFollowPanel from 'soapbox/features/ui/components/who_to_follow_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 { CryptoDonatePanel } from 'soapbox/features/ui/util/async-components';
+import { WhoToFollowPanel, CryptoDonatePanel } 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';
@@ -88,7 +87,11 @@ class HomePage extends ImmutablePureComponent {
{me ?
:
}
{showTrendsPanel &&
}
- {showWhoToFollowPanel &&
}
+ {showWhoToFollowPanel && (
+
+ {Component => }
+
+ )}
diff --git a/app/soapbox/pages/profile_page.js b/app/soapbox/pages/profile_page.js
index 648c26b07..c1376b2cf 100644
--- a/app/soapbox/pages/profile_page.js
+++ b/app/soapbox/pages/profile_page.js
@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Helmet from 'soapbox/components/helmet';
import HeaderContainer from '../features/account_timeline/containers/header_container';
-import WhoToFollowPanel from '../features/ui/components/who_to_follow_panel';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+import { WhoToFollowPanel } 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';
@@ -99,8 +100,12 @@ class ProfilePage extends ImmutablePureComponent {
- {features.suggestions &&
}
{account &&
}
+ {features.suggestions && (
+
+ {Component => }
+
+ )}