Wait for animation frame before initial rendering of post list (#1477)

* Wait for animation frame before initial rendering of post list

Improves startup experience.
(you can see yourself how big a difference is between booting to an empty channel and to a 'busy' channel, and since rendering post list is a heavy task, this change makes the initial UI appear sooner. In my testing it is about 0.7 seconds)

* eslint

* actually render empty screen when loading posts

* delay channel drawer actions after drawer is fully closed

* lazy render FlatList

* eslint

* eslint

app/components/channel_drawer/channel_drawer.js

@@ -214,12 +214,13 @@ export default class ChannelDrawer extends Component {
         } = actions;
 
         tracker.channelSwitch = Date.now();
-        setChannelLoading(channel.id !== currentChannelId);
-        setChannelDisplayName(channel.display_name);
 
         this.closeChannelDrawer();
 
         InteractionManager.runAfterInteractions(() => {
+            setChannelLoading(channel.id !== currentChannelId);
+            setChannelDisplayName(channel.display_name);
+
             handleSelectChannel(channel.id);
             requestAnimationFrame(() => {
                 // mark the channel as viewed after all the frame has flushed

app/components/post_list/post_list.js

@@ -321,13 +321,14 @@ export default class PostList extends PureComponent {
                 ref='list'
                 data={postIds}
                 extraData={this.makeExtraData(channelId, highlightPostId, showLoadMore)}
-                initialNumToRender={INITAL_BATCH_TO_RENDER}
+                initialNumToRender={false}
                 maxToRenderPerBatch={INITAL_BATCH_TO_RENDER + 1}
                 inverted={true}
                 keyExtractor={this.keyExtractor}
                 ListFooterComponent={this.renderFooter}
                 onEndReached={loadMore}
                 onEndReachedThreshold={Platform.OS === 'ios' ? 0 : 1}
+                removeClippedSubviews={Platform.OS === 'android'}
                 {...refreshControl}
                 renderItem={this.renderItem}
                 contentContainerStyle={styles.postListContent}

app/screens/channel/channel_post_list/channel_post_list.js

@@ -7,6 +7,7 @@ import {
     Platform,
     StyleSheet,
     View,
+    InteractionManager,
 } from 'react-native';
 
 import AnnouncementBanner from 'app/components/announcement_banner';
@@ -45,6 +46,7 @@ export default class ChannelPostList extends PureComponent {
 
         this.state = {
             visiblePostIds: this.getVisiblePostIds(props),
+            loading: true,
         };
     }
 
@@ -68,6 +70,10 @@ export default class ChannelPostList extends PureComponent {
         }
     }
 
+    componentDidMount() {
+        InteractionManager.runAfterInteractions(() => this.setState({loading: false}));
+    }
+
     getVisiblePostIds = (props) => {
         return props.postIds.slice(0, props.postVisibility);
     };
@@ -129,9 +135,15 @@ export default class ChannelPostList extends PureComponent {
 
         const {
             visiblePostIds,
+            loading,
         } = this.state;
 
+        if (loading) {
+            return null;
+        }
+
         let component;
+
         if (!postIds.length && channelRefreshingFailed) {
             component = (
                 <PostListRetry