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

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();
+    // Only apply optimization for touch devices, which we assume are slower
-    e.persist();
+    // We thus avoid the 250ms delay for non-touch devices and the lag for touch devices
-
+    if (isUserTouching()) {
-    requestAnimationFrame(() => {
+      e.preventDefault();
-      const tabs = Array(...this.node.querySelectorAll('.tabs-bar__link'));
+      e.persist();
-      const currentTab = tabs.find(tab => tab.classList.contains('active'));
+
-      const nextTab = tabs.find(tab => tab.contains(e.target));
+      requestAnimationFrame(() => {
-      const { props: { to } } = links[Array(...this.node.childNodes).indexOf(nextTab)];
+        const tabs = Array(...this.node.querySelectorAll('.tabs-bar__link'));
-
+        const currentTab = tabs.find(tab => tab.classList.contains('active'));
-      if (currentTab) {
+        const nextTab = tabs.find(tab => tab.contains(e.target));
-        currentTab.classList.remove('active');
+        const { props: { to } } = links[Array(...this.node.childNodes).indexOf(nextTab)];
-      }
+
-
+
-      const listener = debounce(() => {
+        if (currentTab !== nextTab) {
-        nextTab.removeEventListener('transitionend', listener);
+          if (currentTab) {
-        this.context.router.history.push(to);
+            currentTab.classList.remove('active');
-      }, 50);
+          }
-
+
-      nextTab.addEventListener('transitionend', listener);
+          const listener = debounce(() => {
-      nextTab.classList.add('active');
+            nextTab.removeEventListener('transitionend', listener);
-    });
+            this.context.router.history.push(to);
+          }, 50);
+
+          nextTab.addEventListener('transitionend', listener);
+          nextTab.classList.add('active');
+        }
+      });
+    }
 
   }