From 11e0a7daa2a478b1dca5164c11aa4e41e5652f1b Mon Sep 17 00:00:00 2001
From: Mika Andrianarijaona <mikaoelitiana@users.noreply.github.com>
Date: Wed, 8 Feb 2017 19:40:32 +0300
Subject: [PATCH] display loading screen when changing team (#5325)

* display loading screen when changing team

* fix lint error
---
 webapp/components/channel_view.jsx            |  4 +-
 .../components/post_view/post_view_cache.jsx  | 37 +++++++++++++++----
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/webapp/components/channel_view.jsx b/webapp/components/channel_view.jsx
index ff101bca7f..dfeeeca28c 100644
--- a/webapp/components/channel_view.jsx
+++ b/webapp/components/channel_view.jsx
@@ -70,7 +70,9 @@ export default class ChannelView extends React.Component {
                 <ChannelHeader
                     channelId={this.state.channelId}
                 />
-                <PostViewCache/>
+                <PostViewCache
+                    channelId={this.state.channelId}
+                />
                 <div
                     className='post-create__container'
                     id='post-create'
diff --git a/webapp/components/post_view/post_view_cache.jsx b/webapp/components/post_view/post_view_cache.jsx
index 7de11d6673..9c3f1db1b6 100644
--- a/webapp/components/post_view/post_view_cache.jsx
+++ b/webapp/components/post_view/post_view_cache.jsx
@@ -2,6 +2,7 @@
 // See License.txt for license information
 
 import PostViewController from './post_view_controller.jsx';
+import LoadingScreen from 'components/loading_screen.jsx';
 
 import ChannelStore from 'stores/channel_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -67,25 +68,45 @@ export default class PostViewCache extends React.Component {
         });
     }
 
+    shouldComponentUpdate(nextProps) {
+        return Boolean(nextProps.channelId);
+    }
+
     render() {
         const channels = this.state.channels;
         const currentChannelId = this.state.currentChannelId;
-
+        const valid = this.props.channelId === this.state.currentChannelId;
         const postViews = [];
-        for (let i = 0; i < channels.length; i++) {
-            postViews.push(
-                <PostViewController
-                    key={'postviewcontroller_' + channels[i].id}
-                    channel={channels[i]}
-                    active={channels[i].id === currentChannelId}
+        let content;
+
+        if (valid) {
+            for (let i = 0; i < channels.length; i++) {
+                postViews.push(
+                    <PostViewController
+                        key={'postviewcontroller_' + channels[i].id}
+                        channel={channels[i]}
+                        active={channels[i].id === currentChannelId}
+                    />
+                );
+            }
+            content = postViews;
+        } else {
+            content = (
+                <LoadingScreen
+                    position='absolute'
+                    key='loading'
                 />
             );
         }
 
         return (
             <div id='post-list'>
-                {postViews}
+                {content}
             </div>
         );
     }
 }
+
+PostViewCache.propTypes = {
+    channelId: React.PropTypes.string.isRequired
+};