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,6 +40,9 @@ export default class TabsBar extends React.Component {
   }
 
   handleClick = (e) => {
+    // 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();
 
@@ -48,6 +52,8 @@ export default class TabsBar extends React.Component {
         const nextTab = tabs.find(tab => tab.contains(e.target));
         const { props: { to } } = links[Array(...this.node.childNodes).indexOf(nextTab)];
 
+
+        if (currentTab !== nextTab) {
           if (currentTab) {
             currentTab.classList.remove('active');
           }
@@ -59,7 +65,9 @@ export default class TabsBar extends React.Component {
 
           nextTab.addEventListener('transitionend', listener);
           nextTab.classList.add('active');
+        }
       });
+    }
 
   }