Suggestions: break out FollowRecommendationsList component

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

@@ -66,7 +66,7 @@ class Account extends ImmutablePureComponent {
     return (
       <div className='account follow-recommendations-account'>
         <div className='account__wrapper'>
-          <Permalink className='account__display-name account__display-name--with-note' title={account.get('acct')} href={account.get('url')} to={`/accounts/${account.get('id')}`}>
+          <Permalink className='account__display-name account__display-name--with-note' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
             <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
 
             <DisplayName account={account} />

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { FormattedMessage } from 'react-intl';
+import { fetchSuggestions } from 'soapbox/actions/suggestions';
+import Account from './account';
+import LoadingIndicator from 'soapbox/components/loading_indicator';
+
+const mapStateToProps = state => ({
+  suggestions: state.getIn(['suggestions', 'items']),
+  isLoading: state.getIn(['suggestions', 'isLoading']),
+});
+
+export default @connect(mapStateToProps)
+class FollowRecommendationsList extends ImmutablePureComponent {
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    suggestions: ImmutablePropTypes.list,
+    isLoading: PropTypes.bool,
+  };
+
+  componentDidMount() {
+    const { dispatch, suggestions } = this.props;
+
+    // Don't re-fetch if we're e.g. navigating backwards to this page,
+    // since we don't want followed accounts to disappear from the list
+    if (suggestions.size === 0) {
+      dispatch(fetchSuggestions(true));
+    }
+  }
+
+  render() {
+    const { suggestions, isLoading } = this.props;
+
+    if (isLoading) {
+      return (
+        <div className='column-list'>
+          <LoadingIndicator />
+        </div>
+      );
+    }
+
+    return (
+      <div className='column-list'>
+        {suggestions.size > 0 ? suggestions.map(suggestion => (
+          <Account key={suggestion.get('account')} id={suggestion.get('account')} />
+        )) : (
+          <div className='column-list__empty-message'>
+            <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
+          </div>
+        )}
+      </div>
+    );
+
+  }
+
+}

app/soapbox/features/follow_recommendations/index.js

@@ -1,42 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
-import { fetchSuggestions } from 'soapbox/actions/suggestions';
 import Column from 'soapbox/features/ui/components/column';
-import Account from './components/account';
 import Button from 'soapbox/components/button';
+import FollowRecommendationsList from './components/follow_recommendations_list';
 
-const mapStateToProps = state => ({
+export default class FollowRecommendations extends React.Component {
-  suggestions: state.getIn(['suggestions', 'items']),
-  isLoading: state.getIn(['suggestions', 'isLoading']),
-});
-
-export default @connect(mapStateToProps)
-class FollowRecommendations extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object.isRequired,
   };
 
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    suggestions: ImmutablePropTypes.list,
-    isLoading: PropTypes.bool,
-  };
-
-  componentDidMount() {
-    const { dispatch, suggestions } = this.props;
-
-    // Don't re-fetch if we're e.g. navigating backwards to this page,
-    // since we don't want followed accounts to disappear from the list
-    if (suggestions.size === 0) {
-      dispatch(fetchSuggestions(true));
-    }
-  }
-
   handleDone = () => {
     const { router } = this.context;
 
@@ -44,8 +18,6 @@ class FollowRecommendations extends ImmutablePureComponent {
   }
 
   render() {
-    const { suggestions, isLoading } = this.props;
-
     return (
       <Column>
         <div className='scrollable follow-recommendations-container'>
@@ -54,23 +26,13 @@ class FollowRecommendations extends ImmutablePureComponent {
             <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>
 
-          {!isLoading && (
+          <FollowRecommendationsList />
-            <>
-              <div className='column-list'>
-                {suggestions.size > 0 ? suggestions.map(suggestion => (
-                  <Account key={suggestion.get('account')} id={suggestion.get('account')} />
-                )) : (
-                  <div className='column-list__empty-message'>
-                    <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
-                  </div>
-                )}
-              </div>
 
-              <div className='column-actions'>
+          <div className='column-actions'>
-                <Button onClick={this.handleDone}><FormattedMessage id='follow_recommendations.done' defaultMessage='Done' /></Button>
+            <Button onClick={this.handleDone}>
-              </div>
+              <FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
-            </>
+            </Button>
-          )}
+          </div>
         </div>
       </Column>
     );

app/styles/components/columns.scss

@@ -810,3 +810,7 @@
     width: auto;
   }
 }
+
+.column-list {
+  position: relative;
+}