Show loading icon until first page of posts is loaded on channel switch (#3918)

webapp/components/post_view/post_view_controller.jsx

@@ -50,6 +50,9 @@ export default class PostViewController extends React.Component {
             statuses = Object.assign({}, UserStore.getStatuses());
         }
 
+        // If we haven't received a page time then we aren't done loading the posts yet
+        const loading = PostStore.getLatestPostFromPageTime(channel.id) === 0;
+
         this.state = {
             channel,
             postList: PostStore.filterPosts(channel.id, joinLeaveEnabled),
@@ -59,6 +62,7 @@ export default class PostViewController extends React.Component {
             atTop: PostStore.getVisibilityAtTop(channel.id),
             lastViewed,
             ownNewMessage: false,
+            loading,
             scrollType: ScrollTypes.NEW_MESSAGE,
             displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
             displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
@@ -113,11 +117,19 @@ export default class PostViewController extends React.Component {
 
     onPostsChange() {
         const joinLeaveEnabled = PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'join_leave', true);
+        const loading = PostStore.getLatestPostFromPageTime(this.state.channel.id) === 0;
 
-        this.setState({
+        const newState = {
             postList: PostStore.filterPosts(this.state.channel.id, joinLeaveEnabled),
-            atTop: PostStore.getVisibilityAtTop(this.state.channel.id)
+            atTop: PostStore.getVisibilityAtTop(this.state.channel.id),
-        });
+            loading
+        };
+
+        if (this.state.loading && !loading) {
+            newState.scrollType = ScrollTypes.NEW_MESSAGE;
+        }
+
+        this.setState(newState);
     }
 
     onStatusChange() {
@@ -219,6 +231,10 @@ export default class PostViewController extends React.Component {
             return true;
         }
 
+        if (nextState.loading !== this.state.loading) {
+            return true;
+        }
+
         if (nextState.atTop !== this.state.atTop) {
             return true;
         }
@@ -292,7 +308,7 @@ export default class PostViewController extends React.Component {
 
     render() {
         let content;
-        if (this.state.postList == null) {
+        if (this.state.postList == null || this.state.loading) {
             content = (
                 <LoadingScreen
                     position='absolute'

webapp/stores/post_store.jsx

@@ -198,12 +198,17 @@ class PostStoreClass extends EventEmitter {
             return;
         }
 
-        if (checkLatest && newPosts.order.length >= 1) {
+        if (checkLatest) {
             const currentLatest = this.latestPageTime[id] || 0;
+            if (newPosts.order.length >= 1) {
                 const newLatest = newPosts.posts[newPosts.order[0]].create_at || 0;
                 if (newLatest > currentLatest) {
                     this.latestPageTime[id] = newLatest;
                 }
+            } else if (currentLatest === 0) {
+                // Mark that an empty page was received
+                this.latestPageTime[id] = 1;
+            }
         }
 
         const combinedPosts = makePostListNonNull(this.getAllPosts(id));

webapp/utils/async_client.jsx

@@ -609,14 +609,13 @@ export function getPosts(id) {
     }
 
     const postList = PostStore.getAllPosts(channelId);
+    const latestPostTime = PostStore.getLatestPostFromPageTime(id);
 
-    if ($.isEmptyObject(postList) || postList.order.length < Constants.POST_CHUNK_SIZE) {
+    if ($.isEmptyObject(postList) || postList.order.length < Constants.POST_CHUNK_SIZE || latestPostTime === 0) {
         getPostsPage(channelId, Constants.POST_CHUNK_SIZE);
         return;
     }
 
-    const latestPostTime = PostStore.getLatestPostFromPageTime(id);
-
     callTracker['getPosts_' + channelId] = utils.getTimestamp();
 
     Client.getPosts(