From 48a311344c0c1f2df69a58c0214a9520f12db247 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Thu, 13 Sep 2018 16:27:45 -0300
Subject: [PATCH] Fix drawer stutter when jumping to a DM or joining a channel
 (#2113)

---
 app/actions/views/more_dms.js                 |  2 +-
 .../main/channels_list/channels_list.js       |  8 +--
 app/components/sidebars/main/main_sidebar.js  | 69 +++++++++++--------
 3 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/app/actions/views/more_dms.js b/app/actions/views/more_dms.js
index 4b6e55d8b..79180f729 100644
--- a/app/actions/views/more_dms.js
+++ b/app/actions/views/more_dms.js
@@ -23,7 +23,7 @@ export function makeDirectChannel(otherUserId, switchToChannel = true) {
 
             dispatch(toggleDMChannel(otherUserId, 'true', channel.id));
         } else {
-            result = await createDirectChannel(currentUserId, otherUserId)(dispatch, getState);
+            result = await dispatch(createDirectChannel(currentUserId, otherUserId));
             channel = result.data;
         }
 
diff --git a/app/components/sidebars/main/channels_list/channels_list.js b/app/components/sidebars/main/channels_list/channels_list.js
index 2c203f93c..3b4100fac 100644
--- a/app/components/sidebars/main/channels_list/channels_list.js
+++ b/app/components/sidebars/main/channels_list/channels_list.js
@@ -56,15 +56,15 @@ export default class ChannelsList extends PureComponent {
     }
 
     onSelectChannel = (channel, currentChannelId) => {
-        if (this.refs.search_bar) {
-            this.refs.search_bar.cancel();
-        }
-
         if (channel.fake) {
             this.props.onJoinChannel(channel, currentChannelId);
         } else {
             this.props.onSelectChannel(channel, currentChannelId);
         }
+
+        if (this.refs.search_bar) {
+            this.refs.search_bar.cancel();
+        }
     };
 
     onSearch = (term) => {
diff --git a/app/components/sidebars/main/main_sidebar.js b/app/components/sidebars/main/main_sidebar.js
index 95182077b..f2c388db4 100644
--- a/app/components/sidebars/main/main_sidebar.js
+++ b/app/components/sidebars/main/main_sidebar.js
@@ -164,7 +164,7 @@ export default class ChannelSidebar extends Component {
         }
     };
 
-    selectChannel = (channel, currentChannelId) => {
+    selectChannel = (channel, currentChannelId, closeDrawer = true) => {
         const {
             actions,
         } = this.props;
@@ -176,7 +176,10 @@ export default class ChannelSidebar extends Component {
 
         tracker.channelSwitch = Date.now();
 
-        this.closeChannelDrawer();
+        if (closeDrawer) {
+            this.closeChannelDrawer();
+            setChannelLoading(channel.id !== currentChannelId);
+        }
 
         if (!channel) {
             const utils = require('app/utils/general');
@@ -189,15 +192,15 @@ export default class ChannelSidebar extends Component {
             const erroMessage = {};
 
             utils.alertErrorWithFallback(intl, erroMessage, unableToJoinMessage);
+            setChannelLoading(false);
             return;
         }
 
-        setChannelLoading(channel.id !== currentChannelId);
         setChannelDisplayName(channel.display_name);
         EventEmitter.emit('switch_channel', channel, currentChannelId);
     };
 
-    joinChannel = async (channel, currentChannelId) => {
+    joinChannel = (channel, currentChannelId) => {
         const {intl} = this.context;
         const {
             actions,
@@ -210,37 +213,45 @@ export default class ChannelSidebar extends Component {
             makeDirectChannel,
         } = actions;
 
-        const displayValue = {displayName: channel.display_name};
-        const utils = require('app/utils/general');
+        this.closeChannelDrawer();
+        actions.setChannelLoading(channel.id !== currentChannelId);
 
-        let result;
-        if (channel.type === General.DM_CHANNEL) {
-            result = await makeDirectChannel(channel.id, false);
+        setTimeout(async () => {
+            const displayValue = {displayName: channel.display_name};
+            const utils = require('app/utils/general');
 
-            if (result.error) {
-                const dmFailedMessage = {
-                    id: 'mobile.open_dm.error',
-                    defaultMessage: "We couldn't open a direct message with {displayName}. Please check your connection and try again.",
-                };
-                utils.alertErrorWithFallback(intl, result.error, dmFailedMessage, displayValue);
+            let result;
+            if (channel.type === General.DM_CHANNEL) {
+                result = await makeDirectChannel(channel.id, false);
+
+                if (result.error) {
+                    const dmFailedMessage = {
+                        id: 'mobile.open_dm.error',
+                        defaultMessage: "We couldn't open a direct message with {displayName}. Please check your connection and try again.",
+                    };
+                    utils.alertErrorWithFallback(intl, result.error, dmFailedMessage, displayValue);
+                }
+            } else {
+                result = await joinChannel(currentUserId, currentTeamId, channel.id);
+
+                if (result.error || !result.data || !result.data.channel) {
+                    const joinFailedMessage = {
+                        id: 'mobile.join_channel.error',
+                        defaultMessage: "We couldn't join the channel {displayName}. Please check your connection and try again.",
+                    };
+                    utils.alertErrorWithFallback(intl, result.error, joinFailedMessage, displayValue);
+                }
             }
-        } else {
-            result = await joinChannel(currentUserId, currentTeamId, channel.id);
 
-            if (result.error || !result.data || !result.data.channel) {
-                const joinFailedMessage = {
-                    id: 'mobile.join_channel.error',
-                    defaultMessage: "We couldn't join the channel {displayName}. Please check your connection and try again.",
-                };
-                utils.alertErrorWithFallback(intl, result.error, joinFailedMessage, displayValue);
+            if (result.error || (!result.data && !result.data.channel)) {
+                actions.setChannelLoading(false);
+                return;
             }
-        }
 
-        if (result.error) {
-            return;
-        }
-
-        this.selectChannel(result.data.channel || result.data, currentChannelId);
+            requestAnimationFrame(() => {
+                this.selectChannel(result.data.channel || result.data, currentChannelId, false);
+            });
+        }, 200);
     };
 
     onPageSelected = (index) => {