ScrollableList: break up render function into smaller pieces

app/soapbox/components/scrollable_list.js

@@ -221,16 +221,10 @@ export default class ScrollableList extends PureComponent {
     this.node = c;
   }
 
-  render() {
-    const { children, scrollKey, showLoading, isLoading, hasMore, prepend, alwaysPrepend, emptyMessage, onLoadMore } = this.props;
-    const childrenCount = React.Children.count(children);
-    const trackScroll = true; //placeholder
+  renderLoading = () => {
+    const { prepend } = this.props;
 
-    const loadMore     = (hasMore && onLoadMore) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null;
-    let scrollableArea = null;
-
-    if (showLoading) {
-      scrollableArea = (
+    return (
       <div className='slist slist--flex'>
         <div role='feed' className='item-list'>
           {prepend}
@@ -241,13 +235,34 @@ export default class ScrollableList extends PureComponent {
         </div>
       </div>
     );
-    } else if (isLoading || childrenCount > 0 || hasMore || !emptyMessage) {
-      scrollableArea = (
+  }
+
+  renderEmptyMessage = () => {
+    const { prepend, alwaysPrepend, emptyMessage } = this.props;
+
+    return (
+      <div className='slist slist--flex' ref={this.setRef}>
+        {alwaysPrepend && prepend}
+
+        <div className='empty-column-indicator'>
+          <div>{emptyMessage}</div>
+        </div>
+      </div>
+    );
+  }
+
+  renderFeed = () => {
+    const { children, scrollKey, isLoading, hasMore, prepend, onLoadMore } = this.props;
+    const childrenCount = React.Children.count(children);
+    const trackScroll = true; //placeholder
+    const loadMore = (hasMore && onLoadMore) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null;
+
+    return (
       <div className='slist' ref={this.setRef} onMouseMove={this.handleMouseMove}>
         <div role='feed' className='item-list'>
           {prepend}
 
-            {React.Children.map(this.props.children, (child, index) => (
+          {React.Children.map(children, (child, index) => (
             <IntersectionObserverArticleContainer
               key={child.key}
               id={child.key}
@@ -269,19 +284,19 @@ export default class ScrollableList extends PureComponent {
         </div>
       </div>
     );
-    } else {
-      scrollableArea = (
-        <div className='slist slist--flex' ref={this.setRef}>
-          {alwaysPrepend && prepend}
-
-          <div className='empty-column-indicator'>
-            <div>{emptyMessage}</div>
-          </div>
-        </div>
-      );
   }
 
-    return scrollableArea;
+  render() {
+    const { children, showLoading, isLoading, hasMore, emptyMessage } = this.props;
+    const childrenCount = React.Children.count(children);
+
+    if (showLoading) {
+      return this.renderLoading();
+    } else if (isLoading || childrenCount > 0 || hasMore || !emptyMessage) {
+      return this.renderFeed();
+    } else {
+      return this.renderEmptyMessage();
+    }
   }
 
 }