Fix loading indicator inconsistency (#9252)

* Use global loading indicator when loading more items

* Use local loading indicator for notifications

And remove global loading indicator for initial custom emojis load
This commit is contained in:
Eugen Rochko 2018-11-10 15:04:13 +01:00 committed by GitHub
parent 2f86fc5e0a
commit 3cecf3e5b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 27 additions and 15 deletions

View file

@ -19,6 +19,7 @@ export function fetchCustomEmojis() {
export function fetchCustomEmojisRequest() { export function fetchCustomEmojisRequest() {
return { return {
type: CUSTOM_EMOJIS_FETCH_REQUEST, type: CUSTOM_EMOJIS_FETCH_REQUEST,
skipLoading: true,
}; };
}; };
@ -26,6 +27,7 @@ export function fetchCustomEmojisSuccess(custom_emojis) {
return { return {
type: CUSTOM_EMOJIS_FETCH_SUCCESS, type: CUSTOM_EMOJIS_FETCH_SUCCESS,
custom_emojis, custom_emojis,
skipLoading: true,
}; };
}; };
@ -33,5 +35,6 @@ export function fetchCustomEmojisFail(error) {
return { return {
type: CUSTOM_EMOJIS_FETCH_FAIL, type: CUSTOM_EMOJIS_FETCH_FAIL,
error, error,
skipLoading: true,
}; };
}; };

View file

@ -30,6 +30,7 @@ export function fetchFavouritedStatuses() {
export function fetchFavouritedStatusesRequest() { export function fetchFavouritedStatusesRequest() {
return { return {
type: FAVOURITED_STATUSES_FETCH_REQUEST, type: FAVOURITED_STATUSES_FETCH_REQUEST,
skipLoading: true,
}; };
}; };
@ -38,6 +39,7 @@ export function fetchFavouritedStatusesSuccess(statuses, next) {
type: FAVOURITED_STATUSES_FETCH_SUCCESS, type: FAVOURITED_STATUSES_FETCH_SUCCESS,
statuses, statuses,
next, next,
skipLoading: true,
}; };
}; };
@ -45,6 +47,7 @@ export function fetchFavouritedStatusesFail(error) {
return { return {
type: FAVOURITED_STATUSES_FETCH_FAIL, type: FAVOURITED_STATUSES_FETCH_FAIL,
error, error,
skipLoading: true,
}; };
}; };

View file

@ -93,6 +93,7 @@ const noOp = () => {};
export function expandNotifications({ maxId } = {}, done = noOp) { export function expandNotifications({ maxId } = {}, done = noOp) {
return (dispatch, getState) => { return (dispatch, getState) => {
const notifications = getState().get('notifications'); const notifications = getState().get('notifications');
const isLoadingMore = !!maxId;
if (notifications.get('isLoading')) { if (notifications.get('isLoading')) {
done(); done();
@ -108,7 +109,7 @@ export function expandNotifications({ maxId } = {}, done = noOp) {
params.since_id = notifications.getIn(['items', 0]); params.since_id = notifications.getIn(['items', 0]);
} }
dispatch(expandNotificationsRequest()); dispatch(expandNotificationsRequest(isLoadingMore));
api(getState).get('/api/v1/notifications', { params }).then(response => { api(getState).get('/api/v1/notifications', { params }).then(response => {
const next = getLinks(response).refs.find(link => link.rel === 'next'); const next = getLinks(response).refs.find(link => link.rel === 'next');
@ -116,34 +117,37 @@ export function expandNotifications({ maxId } = {}, done = noOp) {
dispatch(importFetchedAccounts(response.data.map(item => item.account))); dispatch(importFetchedAccounts(response.data.map(item => item.account)));
dispatch(importFetchedStatuses(response.data.map(item => item.status).filter(status => !!status))); dispatch(importFetchedStatuses(response.data.map(item => item.status).filter(status => !!status)));
dispatch(expandNotificationsSuccess(response.data, next ? next.uri : null)); dispatch(expandNotificationsSuccess(response.data, next ? next.uri : null, isLoadingMore));
fetchRelatedRelationships(dispatch, response.data); fetchRelatedRelationships(dispatch, response.data);
done(); done();
}).catch(error => { }).catch(error => {
dispatch(expandNotificationsFail(error)); dispatch(expandNotificationsFail(error, isLoadingMore));
done(); done();
}); });
}; };
}; };
export function expandNotificationsRequest() { export function expandNotificationsRequest(isLoadingMore) {
return { return {
type: NOTIFICATIONS_EXPAND_REQUEST, type: NOTIFICATIONS_EXPAND_REQUEST,
skipLoading: !isLoadingMore,
}; };
}; };
export function expandNotificationsSuccess(notifications, next) { export function expandNotificationsSuccess(notifications, next, isLoadingMore) {
return { return {
type: NOTIFICATIONS_EXPAND_SUCCESS, type: NOTIFICATIONS_EXPAND_SUCCESS,
notifications, notifications,
next, next,
skipLoading: !isLoadingMore,
}; };
}; };
export function expandNotificationsFail(error) { export function expandNotificationsFail(error, isLoadingMore) {
return { return {
type: NOTIFICATIONS_EXPAND_FAIL, type: NOTIFICATIONS_EXPAND_FAIL,
error, error,
skipLoading: !isLoadingMore,
}; };
}; };

View file

@ -63,6 +63,7 @@ const parseTags = (tags = {}, mode) => {
export function expandTimeline(timelineId, path, params = {}, done = noOp) { export function expandTimeline(timelineId, path, params = {}, done = noOp) {
return (dispatch, getState) => { return (dispatch, getState) => {
const timeline = getState().getIn(['timelines', timelineId], ImmutableMap()); const timeline = getState().getIn(['timelines', timelineId], ImmutableMap());
const isLoadingMore = !!params.max_id;
if (timeline.get('isLoading')) { if (timeline.get('isLoading')) {
done(); done();
@ -73,15 +74,15 @@ export function expandTimeline(timelineId, path, params = {}, done = noOp) {
params.since_id = timeline.getIn(['items', 0]); params.since_id = timeline.getIn(['items', 0]);
} }
dispatch(expandTimelineRequest(timelineId)); dispatch(expandTimelineRequest(timelineId, isLoadingMore));
api(getState).get(path, { params }).then(response => { api(getState).get(path, { params }).then(response => {
const next = getLinks(response).refs.find(link => link.rel === 'next'); const next = getLinks(response).refs.find(link => link.rel === 'next');
dispatch(importFetchedStatuses(response.data)); dispatch(importFetchedStatuses(response.data));
dispatch(expandTimelineSuccess(timelineId, response.data, next ? next.uri : null, response.code === 206)); dispatch(expandTimelineSuccess(timelineId, response.data, next ? next.uri : null, response.code === 206, isLoadingMore));
done(); done();
}).catch(error => { }).catch(error => {
dispatch(expandTimelineFail(timelineId, error)); dispatch(expandTimelineFail(timelineId, error, isLoadingMore));
done(); done();
}); });
}; };
@ -103,31 +104,31 @@ export const expandHashtagTimeline = (hashtag, { maxId, tags } = {}, don
}, done); }, done);
}; };
export function expandTimelineRequest(timeline) { export function expandTimelineRequest(timeline, isLoadingMore) {
return { return {
type: TIMELINE_EXPAND_REQUEST, type: TIMELINE_EXPAND_REQUEST,
timeline, timeline,
skipLoading: true, skipLoading: !isLoadingMore,
}; };
}; };
export function expandTimelineSuccess(timeline, statuses, next, partial) { export function expandTimelineSuccess(timeline, statuses, next, partial, isLoadingMore) {
return { return {
type: TIMELINE_EXPAND_SUCCESS, type: TIMELINE_EXPAND_SUCCESS,
timeline, timeline,
statuses, statuses,
next, next,
partial, partial,
skipLoading: true, skipLoading: !isLoadingMore,
}; };
}; };
export function expandTimelineFail(timeline, error) { export function expandTimelineFail(timeline, error, isLoadingMore) {
return { return {
type: TIMELINE_EXPAND_FAIL, type: TIMELINE_EXPAND_FAIL,
timeline, timeline,
error, error,
skipLoading: true, skipLoading: !isLoadingMore,
}; };
}; };

View file

@ -153,6 +153,7 @@ class Notifications extends React.PureComponent {
scrollKey={`notifications-${columnId}`} scrollKey={`notifications-${columnId}`}
trackScroll={!pinned} trackScroll={!pinned}
isLoading={isLoading} isLoading={isLoading}
showLoading={isLoading && notifications.size === 0}
hasMore={hasMore} hasMore={hasMore}
emptyMessage={emptyMessage} emptyMessage={emptyMessage}
onLoadMore={this.handleLoadOlder} onLoadMore={this.handleLoadOlder}