diff --git a/app/javascript/mastodon/features/ui/components/tabs_bar.js b/app/javascript/mastodon/features/ui/components/tabs_bar.js
index 4d488f82d..7e6a65cdb 100644
--- a/app/javascript/mastodon/features/ui/components/tabs_bar.js
+++ b/app/javascript/mastodon/features/ui/components/tabs_bar.js
@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import NavLink from 'react-router-dom/NavLink';
import { FormattedMessage, injectIntl } from 'react-intl';
+import { debounce } from 'lodash';
export const links = [
,
@@ -25,16 +26,47 @@ export function getLink (index) {
@injectIntl
export default class TabsBar extends React.Component {
+ static contextTypes = {
+ router: PropTypes.object.isRequired,
+ }
+
static propTypes = {
intl: PropTypes.object.isRequired,
}
+ setRef = ref => {
+ this.node = ref;
+ }
+
+ handleClick = (e) => {
+ 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)];
+
+ currentTab.classList.remove('active');
+
+ const listener = debounce(() => {
+ nextTab.removeEventListener('transitionend', listener);
+ this.context.router.history.push(to);
+ }, 50);
+
+ nextTab.addEventListener('transitionend', listener);
+ nextTab.classList.add('active');
+ });
+
+ }
+
render () {
const { intl: { formatMessage } } = this.props;
return (
-