Suggestions: make DRY, fix isLoading state

app/soapbox/features/follow_recommendations/components/follow_recommendations_container.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import Button from 'soapbox/components/button';
+import FollowRecommendationsList from './follow_recommendations_list';
+
+export default class FollowRecommendationsContainer extends React.Component {
+
+  static propTypes = {
+    onDone: PropTypes.func.isRequired,
+  }
+
+  handleDone = () => {
+    this.props.onDone();
+  }
+
+  render() {
+    return (
+      <div className='scrollable follow-recommendations-container'>
+        <div className='column-title'>
+          <h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
+          <p><FormattedMessage id='follow_recommendations.lead' defaultMessage="Posts from people you follow will show up in chronological order on your home feed. Don't be afraid to make mistakes, you can unfollow people just as easily any time!" /></p>
+        </div>
+
+        <FollowRecommendationsList />
+
+        <div className='column-actions'>
+          <Button onClick={this.handleDone}>
+            <FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+}

app/soapbox/features/follow_recommendations/index.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import Column from 'soapbox/features/ui/components/column';
-import Button from 'soapbox/components/button';
+import FollowRecommendationsContainer from './components/follow_recommendations_container';
-import FollowRecommendationsList from './components/follow_recommendations_list';
 
 export default class FollowRecommendations extends React.Component {
 
@@ -11,7 +9,7 @@ export default class FollowRecommendations extends React.Component {
     router: PropTypes.object.isRequired,
   };
 
-  handleDone = () => {
+  onDone = () => {
     const { router } = this.context;
 
     router.history.push('/');
@@ -20,20 +18,7 @@ export default class FollowRecommendations extends React.Component {
   render() {
     return (
       <Column>
-        <div className='scrollable follow-recommendations-container'>
+        <FollowRecommendationsContainer onDone={this.onDone} />
-          <div className='column-title'>
-            <h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
-            <p><FormattedMessage id='follow_recommendations.lead' defaultMessage="Posts from people you follow will show up in chronological order on your home feed. Don't be afraid to make mistakes, you can unfollow people just as easily any time!" /></p>
-          </div>
-
-          <FollowRecommendationsList />
-
-          <div className='column-actions'>
-            <Button onClick={this.handleDone}>
-              <FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
-            </Button>
-          </div>
-        </div>
       </Column>
     );
   }

app/soapbox/features/home_timeline/index.js

@@ -9,12 +9,11 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ColumnSettingsContainer from './containers/column_settings_container';
 import HomeColumnHeader from '../../components/home_column_header';
 import { Link } from 'react-router-dom';
-import Button from 'soapbox/components/button';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { getFeatures } from 'soapbox/utils/features';
 
-function FollowRecommendationsList() {
+function FollowRecommendationsContainer() {
-  return import(/* webpackChunkName: "features/follow_recommendations" */'soapbox/features/follow_recommendations/components/follow_recommendations_list');
+  return import(/* webpackChunkName: "features/follow_recommendations" */'soapbox/features/follow_recommendations/components/follow_recommendations_container');
 }
 
 const messages = defineMessages({
@@ -29,6 +28,7 @@ const mapStateToProps = state => {
     hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0,
     isPartial: state.getIn(['timelines', 'home', 'isPartial']),
     siteTitle: state.getIn(['instance', 'title']),
+    isLoading: state.getIn(['timelines', 'home', 'isLoading'], true),
     isEmpty: state.getIn(['timelines', 'home', 'items'], ImmutableOrderedSet()).isEmpty(),
     features,
   };
@@ -44,6 +44,7 @@ class HomeTimeline extends React.PureComponent {
     hasUnread: PropTypes.bool,
     isPartial: PropTypes.bool,
     siteTitle: PropTypes.string,
+    isLoading: PropTypes.bool,
     isEmpty: PropTypes.bool,
     features: PropTypes.object.isRequired,
   };
@@ -94,29 +95,8 @@ class HomeTimeline extends React.PureComponent {
     this.setState({ done: true });
   }
 
-  renderFollowRecommendations = () => {
-    return (
-      <div className='scrollable follow-recommendations-container'>
-        <div className='column-title'>
-          <h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
-          <p><FormattedMessage id='follow_recommendations.lead' defaultMessage="Posts from people you follow will show up in chronological order on your home feed. Don't be afraid to make mistakes, you can unfollow people just as easily any time!" /></p>
-        </div>
-
-        <BundleContainer fetchComponent={FollowRecommendationsList}>
-          {Component => <Component />}
-        </BundleContainer>
-
-        <div className='column-actions'>
-          <Button onClick={this.handleDone}>
-            <FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
   render() {
-    const { intl, hasUnread, siteTitle, isEmpty, features } = this.props;
+    const { intl, hasUnread, siteTitle, isLoading, isEmpty, features } = this.props;
     const { done } = this.state;
 
     return (
@@ -124,8 +104,10 @@ class HomeTimeline extends React.PureComponent {
         <HomeColumnHeader activeItem='home' active={hasUnread}>
           <ColumnSettingsContainer />
         </HomeColumnHeader>
-        {(features.suggestions && isEmpty && !done) ? (
+        {(features.suggestions && isEmpty && !isLoading && !done) ? (
-          this.renderFollowRecommendations()
+          <BundleContainer fetchComponent={FollowRecommendationsContainer}>
+            {Component => <Component onDone={this.handleDone} />}
+          </BundleContainer>
         ) : (
           <StatusListContainer
             scrollKey='home_timeline'