From 4f04981dde71ab621a6d0c8cff7aade5f5efb649 Mon Sep 17 00:00:00 2001
From: Sorin Davidoi <sorin.davidoi@gmail.com>
Date: Sat, 29 Jul 2017 21:20:34 +0200
Subject: [PATCH] feat(tabs_bar): Avoid optimization for non-touch devices
 (#4444)

* fix(tabs_bar): Check if transition is necessary

* feat(tabs_bar): Only apply optimization for touch devices
---
 .../features/ui/components/tabs_bar.js        | 42 +++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/app/javascript/mastodon/features/ui/components/tabs_bar.js b/app/javascript/mastodon/features/ui/components/tabs_bar.js
index e4061cdc4..af9e6bf45 100644
--- a/app/javascript/mastodon/features/ui/components/tabs_bar.js
+++ b/app/javascript/mastodon/features/ui/components/tabs_bar.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import NavLink from 'react-router-dom/NavLink';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { debounce } from 'lodash';
+import { isUserTouching } from '../../../is_mobile';
 
 export const links = [
   <NavLink className='tabs-bar__link primary' to='/statuses/new' data-preview-title-id='tabs_bar.compose' data-preview-icon='pencil' ><i className='fa fa-fw fa-pencil' /><FormattedMessage id='tabs_bar.compose' defaultMessage='Compose' /></NavLink>,
@@ -39,27 +40,34 @@ export default class TabsBar extends React.Component {
   }
 
   handleClick = (e) => {
-    e.preventDefault();
-    e.persist();
+    // Only apply optimization for touch devices, which we assume are slower
+    // We thus avoid the 250ms delay for non-touch devices and the lag for touch devices
+    if (isUserTouching()) {
+      e.preventDefault();
+      e.persist();
 
-    requestAnimationFrame(() => {
-      const tabs = Array(...this.node.querySelectorAll('.tabs-bar__link'));
-      const currentTab = tabs.find(tab => tab.classList.contains('active'));
-      const nextTab = tabs.find(tab => tab.contains(e.target));
-      const { props: { to } } = links[Array(...this.node.childNodes).indexOf(nextTab)];
+      requestAnimationFrame(() => {
+        const tabs = Array(...this.node.querySelectorAll('.tabs-bar__link'));
+        const currentTab = tabs.find(tab => tab.classList.contains('active'));
+        const nextTab = tabs.find(tab => tab.contains(e.target));
+        const { props: { to } } = links[Array(...this.node.childNodes).indexOf(nextTab)];
 
-      if (currentTab) {
-        currentTab.classList.remove('active');
-      }
 
-      const listener = debounce(() => {
-        nextTab.removeEventListener('transitionend', listener);
-        this.context.router.history.push(to);
-      }, 50);
+        if (currentTab !== nextTab) {
+          if (currentTab) {
+            currentTab.classList.remove('active');
+          }
 
-      nextTab.addEventListener('transitionend', listener);
-      nextTab.classList.add('active');
-    });
+          const listener = debounce(() => {
+            nextTab.removeEventListener('transitionend', listener);
+            this.context.router.history.push(to);
+          }, 50);
+
+          nextTab.addEventListener('transitionend', listener);
+          nextTab.classList.add('active');
+        }
+      });
+    }
 
   }