From 913e29e37bb956feb6caabf3722e8d9aa9717b38 Mon Sep 17 00:00:00 2001
From: enahum <nahumhbl@gmail.com>
Date: Tue, 21 Mar 2017 19:09:56 -0300
Subject: [PATCH] PLT-5933 Fix drawer transition lag (#377)

* Fix drawer transition lag

* make handleSelectChannel perform actions in parallel
---
 app/actions/views/channel.js                |  6 ++---
 app/navigation/router.js                    | 27 ++++++++++++++++++++-
 app/scenes/channel_drawer/channel_drawer.js |  4 +--
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/app/actions/views/channel.js b/app/actions/views/channel.js
index bc0006823..a20e703f9 100644
--- a/app/actions/views/channel.js
+++ b/app/actions/views/channel.js
@@ -175,9 +175,9 @@ export function handleSelectChannel(channelId) {
     return async (dispatch, getState) => {
         const {currentTeamId} = getState().entities.teams;
 
-        await updateStorage(currentTeamId, {currentChannelId: channelId});
-        await selectChannel(channelId)(dispatch, getState);
-        await getChannelStats(currentTeamId, channelId)(dispatch, getState);
+        updateStorage(currentTeamId, {currentChannelId: channelId});
+        getChannelStats(currentTeamId, channelId)(dispatch, getState);
+        selectChannel(channelId)(dispatch, getState);
     };
 }
 
diff --git a/app/navigation/router.js b/app/navigation/router.js
index d408d2911..25ee92f3d 100644
--- a/app/navigation/router.js
+++ b/app/navigation/router.js
@@ -5,6 +5,7 @@ import React from 'react';
 import {
     Dimensions,
     Easing,
+    InteractionManager,
     NavigationExperimental,
     View
 } from 'react-native';
@@ -216,6 +217,26 @@ class Router extends React.Component {
         };
     };
 
+    handleLeftDrawerClose = () => {
+        setTimeout(() => {
+            InteractionManager.clearInteractionHandle(this.closeLeftHandle);
+        });
+    };
+
+    handleLeftDrawerCloseStart = () => {
+        this.closeLeftHandle = InteractionManager.createInteractionHandle();
+    };
+
+    handleLeftDrawerOpen = () => {
+        setTimeout(() => {
+            InteractionManager.clearInteractionHandle(this.openLeftHandle);
+        });
+    };
+
+    handleLeftDrawerOpenStart = () => {
+        this.openLeftHandle = InteractionManager.createInteractionHandle();
+    };
+
     render = () => {
         const {
             index,
@@ -248,6 +269,10 @@ class Router extends React.Component {
             >
                 <Drawer
                     open={leftDrawerOpen}
+                    onOpenStart={this.handleLeftDrawerOpenStart}
+                    onOpen={this.handleLeftDrawerOpen}
+                    onCloseStart={this.handleLeftDrawerCloseStart}
+                    onClose={this.handleLeftDrawerClose}
                     type='displace'
                     disabled={modalVisible}
                     content={leftDrawerContent}
@@ -259,7 +284,7 @@ class Router extends React.Component {
                     panThreshold={0.2}
                     acceptPan={navigationProps.allowMenuSwipe}
                     negotiatePan={true}
-                    useInteractionManager={true}
+                    useInteractionManager={false}
                     tweenHandler={this.handleDrawerTween}
                 >
                     <Drawer
diff --git a/app/scenes/channel_drawer/channel_drawer.js b/app/scenes/channel_drawer/channel_drawer.js
index c95bd438b..0a108b879 100644
--- a/app/scenes/channel_drawer/channel_drawer.js
+++ b/app/scenes/channel_drawer/channel_drawer.js
@@ -32,11 +32,11 @@ export default class ChannelDrawer extends PureComponent {
             currentTeam
         } = this.props;
 
+        this.props.actions.markChannelAsRead(id, currentChannel.id);
+        this.props.actions.viewChannel(currentTeam.id, id);
         this.props.actions.closeDrawers();
         InteractionManager.runAfterInteractions(() => {
-            this.props.actions.markChannelAsRead(id, currentChannel.id);
             this.props.actions.handleSelectChannel(id);
-            this.props.actions.viewChannel(currentTeam.id, id);
         });
     };