From 4e6b5e78796c1c1074a3bc6a7fd5e5797dd9987e Mon Sep 17 00:00:00 2001 From: unarist Date: Sat, 24 Jun 2017 09:43:26 +0900 Subject: [PATCH] Use debounce for dispatch scrollTopNotification and expandNotifications (#3700) --- .../mastodon/features/notifications/index.js | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/app/javascript/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js index 1dd1b9a71..ed4b3ad98 100644 --- a/app/javascript/mastodon/features/notifications/index.js +++ b/app/javascript/mastodon/features/notifications/index.js @@ -13,6 +13,7 @@ import ColumnSettingsContainer from './containers/column_settings_container'; import { createSelector } from 'reselect'; import Immutable from 'immutable'; import LoadMore from '../../components/load_more'; +import { debounce } from 'lodash'; const messages = defineMessages({ title: { id: 'column.notifications', defaultMessage: 'Notifications' }, @@ -50,19 +51,27 @@ export default class Notifications extends React.PureComponent { trackScroll: true, }; + dispatchExpandNotifications = debounce(() => { + this.props.dispatch(expandNotifications()); + }, 300, { leading: true }); + + dispatchScrollToTop = debounce((top) => { + this.props.dispatch(scrollTopNotifications(top)); + }, 100); + handleScroll = (e) => { const { scrollTop, scrollHeight, clientHeight } = e.target; const offset = scrollHeight - scrollTop - clientHeight; this._oldScrollPosition = scrollHeight - scrollTop; - if (250 > offset && !this.props.isLoading) { - if (this.props.hasMore) { - this.props.dispatch(expandNotifications()); - } - } else if (scrollTop < 100) { - this.props.dispatch(scrollTopNotifications(true)); + if (250 > offset && this.props.hasMore && !this.props.isLoading) { + this.dispatchExpandNotifications(); + } + + if (scrollTop < 100) { + this.dispatchScrollToTop(true); } else { - this.props.dispatch(scrollTopNotifications(false)); + this.dispatchScrollToTop(false); } } @@ -74,7 +83,7 @@ export default class Notifications extends React.PureComponent { handleLoadMore = (e) => { e.preventDefault(); - this.props.dispatch(expandNotifications()); + this.dispatchExpandNotifications(); } handlePin = () => {