MM-12199 Add a check for loading on threads (#2146)

app/screens/thread/index.js

@@ -28,6 +28,7 @@ function makeMapStateToProps() {
             postIds: getPostIdsForThread(state, ownProps.rootId),
             theme: getTheme(state),
             channelIsArchived: channel ? channel.delete_at !== 0 : false,
+            threadLoadingStatus: state.requests.posts.getPostThread,
         };
     };
 }

app/screens/thread/thread.js

@@ -5,9 +5,9 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {Platform} from 'react-native';
 import {injectIntl, intlShape} from 'react-intl';
+import {General, RequestStatus} from 'mattermost-redux/constants';
 
-import {General} from 'mattermost-redux/constants';
-
+import Loading from 'app/components/loading';
 import KeyboardLayout from 'app/components/layout/keyboard_layout';
 import PostList from 'app/components/post_list';
 import PostTextbox from 'app/components/post_textbox';
@@ -31,6 +31,7 @@ class Thread extends PureComponent {
         theme: PropTypes.object.isRequired,
         postIds: PropTypes.array.isRequired,
         channelIsArchived: PropTypes.bool,
+        threadLoadingStatus: PropTypes.object,
     };
 
     state = {};
@@ -88,7 +89,7 @@ class Thread extends PureComponent {
     }
 
     renderFooter = () => {
-        if (!this.hasRootPost()) {
+        if (!this.hasRootPost() && this.props.threadLoadingStatus.status !== RequestStatus.STARTED) {
             return (
                 <DeletedPost theme={this.props.theme}/>
             );
@@ -124,6 +125,35 @@ class Thread extends PureComponent {
             channelIsArchived,
         } = this.props;
         const style = getStyle(theme);
+        let content;
+        if (this.props.threadLoadingStatus.status === RequestStatus.STARTED) {
+            content = (
+                <Loading/>
+            );
+        } else {
+            content = (
+                <PostList
+                    renderFooter={this.renderFooter}
+                    indicateNewMessages={true}
+                    postIds={postIds}
+                    currentUserId={myMember.user_id}
+                    lastViewedAt={this.state.lastViewedAt}
+                    navigator={navigator}
+                />
+            );
+        }
+        let postTextBox;
+        if (this.hasRootPost() && this.props.threadLoadingStatus.status !== RequestStatus.STARTED) {
+            postTextBox = (
+                <PostTextbox
+                    channelIsArchived={channelIsArchived}
+                    rootId={rootId}
+                    channelId={channelId}
+                    navigator={navigator}
+                    onCloseChannel={this.onCloseChannel}
+                />
+            );
+        }
 
         return (
             <SafeAreaView
@@ -136,22 +166,8 @@ class Thread extends PureComponent {
                     style={style.container}
                     keyboardVerticalOffset={65}
                 >
-                    <PostList
-                        renderFooter={this.renderFooter}
-                        indicateNewMessages={true}
-                        postIds={postIds}
-                        currentUserId={myMember.user_id}
-                        lastViewedAt={this.state.lastViewedAt}
-                        navigator={navigator}
-                    />
-                    {this.hasRootPost() &&
-                    <PostTextbox
-                        channelIsArchived={channelIsArchived}
-                        rootId={rootId}
-                        channelId={channelId}
-                        navigator={navigator}
-                        onCloseChannel={this.onCloseChannel}
-                    />}
+                    {content}
+                    {postTextBox}
                 </KeyboardLayout>
             </SafeAreaView>
         );