forked from treehouse/mastodon
Use debounce for dispatch scrollTopNotification and expandNotifications (#3700)
parent
c0979381a4
commit
4e6b5e7879
|
@ -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());
|
||||
if (250 > offset && this.props.hasMore && !this.props.isLoading) {
|
||||
this.dispatchExpandNotifications();
|
||||
}
|
||||
} else if (scrollTop < 100) {
|
||||
this.props.dispatch(scrollTopNotifications(true));
|
||||
|
||||
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 = () => {
|
||||
|
|
Loading…
Reference in New Issue