diff --git a/app/javascript/flavours/glitch/actions/favourites.js b/app/javascript/flavours/glitch/actions/favourites.js index decdcee4f2a..0c0f3af448f 100644 --- a/app/javascript/flavours/glitch/actions/favourites.js +++ b/app/javascript/flavours/glitch/actions/favourites.js @@ -10,6 +10,10 @@ export const FAVOURITED_STATUSES_EXPAND_FAIL = 'FAVOURITED_STATUSES_EXPAND_FA export function fetchFavouritedStatuses() { return (dispatch, getState) => { + if (getState().getIn(['status_lists', 'favourites', 'isLoading'])) { + return; + } + dispatch(fetchFavouritedStatusesRequest()); api(getState).get('/api/v1/favourites').then(response => { @@ -46,7 +50,7 @@ export function expandFavouritedStatuses() { return (dispatch, getState) => { const url = getState().getIn(['status_lists', 'favourites', 'next'], null); - if (url === null) { + if (url === null || getState().getIn(['status_lists', 'favourites', 'isLoading'])) { return; } diff --git a/app/javascript/flavours/glitch/features/favourited_statuses/index.js b/app/javascript/flavours/glitch/features/favourited_statuses/index.js index e20dda71833..301a5ae4f1e 100644 --- a/app/javascript/flavours/glitch/features/favourited_statuses/index.js +++ b/app/javascript/flavours/glitch/features/favourited_statuses/index.js @@ -9,6 +9,7 @@ import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/col import StatusList from 'flavours/glitch/components/status_list'; import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { debounce } from 'lodash'; const messages = defineMessages({ heading: { id: 'column.favourites', defaultMessage: 'Favourites' }, @@ -16,6 +17,7 @@ const messages = defineMessages({ const mapStateToProps = state => ({ statusIds: state.getIn(['status_lists', 'favourites', 'items']), + isLoading: state.getIn(['status_lists', 'favourites', 'isLoading'], true), hasMore: !!state.getIn(['status_lists', 'favourites', 'next']), }); @@ -30,6 +32,7 @@ export default class Favourites extends ImmutablePureComponent { columnId: PropTypes.string, multiColumn: PropTypes.bool, hasMore: PropTypes.bool, + isLoading: PropTypes.bool, }; componentWillMount () { @@ -59,12 +62,12 @@ export default class Favourites extends ImmutablePureComponent { this.column = c; } - handleScrollToBottom = () => { + handleScrollToBottom = debounce(() => { this.props.dispatch(expandFavouritedStatuses()); - } + }, 300, { leading: true }) render () { - const { intl, statusIds, columnId, multiColumn, hasMore } = this.props; + const { intl, statusIds, columnId, multiColumn, hasMore, isLoading } = this.props; const pinned = !!columnId; return ( @@ -85,6 +88,7 @@ export default class Favourites extends ImmutablePureComponent { statusIds={statusIds} scrollKey={`favourited_statuses-${columnId}`} hasMore={hasMore} + isLoading={isLoading} onScrollToBottom={this.handleScrollToBottom} /> diff --git a/app/javascript/flavours/glitch/reducers/status_lists.js b/app/javascript/flavours/glitch/reducers/status_lists.js index 5a3d0db0cab..6de81c6b1bf 100644 --- a/app/javascript/flavours/glitch/reducers/status_lists.js +++ b/app/javascript/flavours/glitch/reducers/status_lists.js @@ -1,6 +1,10 @@ import { + FAVOURITED_STATUSES_FETCH_REQUEST, FAVOURITED_STATUSES_FETCH_SUCCESS, + FAVOURITED_STATUSES_FETCH_FAIL, + FAVOURITED_STATUSES_EXPAND_REQUEST, FAVOURITED_STATUSES_EXPAND_SUCCESS, + FAVOURITED_STATUSES_EXPAND_FAIL, } from 'flavours/glitch/actions/favourites'; import { PINNED_STATUSES_FETCH_SUCCESS, @@ -30,6 +34,7 @@ const normalizeList = (state, listType, statuses, next) => { return state.update(listType, listMap => listMap.withMutations(map => { map.set('next', next); map.set('loaded', true); + map.set('isLoading', false); map.set('items', ImmutableList(statuses.map(item => item.id))); })); }; @@ -37,6 +42,7 @@ const normalizeList = (state, listType, statuses, next) => { const appendToList = (state, listType, statuses, next) => { return state.update(listType, listMap => listMap.withMutations(map => { map.set('next', next); + map.set('isLoading', false); map.set('items', map.get('items').concat(statuses.map(item => item.id))); })); }; @@ -55,6 +61,12 @@ const removeOneFromList = (state, listType, status) => { export default function statusLists(state = initialState, action) { switch(action.type) { + case FAVOURITED_STATUSES_FETCH_REQUEST: + case FAVOURITED_STATUSES_EXPAND_REQUEST: + return state.setIn(['favourites', 'isLoading'], true); + case FAVOURITED_STATUSES_FETCH_FAIL: + case FAVOURITED_STATUSES_EXPAND_FAIL: + return state.setIn(['favourites', 'isLoading'], false); case FAVOURITED_STATUSES_FETCH_SUCCESS: return normalizeList(state, 'favourites', action.statuses, action.next); case FAVOURITED_STATUSES_EXPAND_SUCCESS: