From 4f04981dde71ab621a6d0c8cff7aade5f5efb649 Mon Sep 17 00:00:00 2001 From: Sorin Davidoi 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 = [ , @@ -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'); + } + }); + } }