From 9d192a3d8a02c5e5d3c743ded5e042b1c8a8b6dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Odziemczyk?= <koxen@users.noreply.github.com>
Date: Wed, 7 Mar 2018 15:20:25 +0100
Subject: [PATCH] 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      |  5 +++--
 app/components/post_list/post_list.js                |  3 ++-
 .../channel/channel_post_list/channel_post_list.js   | 12 ++++++++++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/app/components/channel_drawer/channel_drawer.js b/app/components/channel_drawer/channel_drawer.js
index 605a359c4..3abc18a4e 100644
--- a/app/components/channel_drawer/channel_drawer.js
+++ b/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
diff --git a/app/components/post_list/post_list.js b/app/components/post_list/post_list.js
index 4d8a9d657..7dc38dad2 100644
--- a/app/components/post_list/post_list.js
+++ b/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}
diff --git a/app/screens/channel/channel_post_list/channel_post_list.js b/app/screens/channel/channel_post_list/channel_post_list.js
index fe13f17da..832ce5690 100644
--- a/app/screens/channel/channel_post_list/channel_post_list.js
+++ b/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