From 62e9525724cfff0c3e26b8325b019e926baed1ca Mon Sep 17 00:00:00 2001 From: shpuld Date: Tue, 29 Jan 2019 21:04:52 +0200 Subject: [PATCH] Add loading indicator for notifications, make timelines indicate bottoming out when no more statuses --- src/components/notifications/notifications.js | 14 ++++++++++++++ src/components/notifications/notifications.vue | 9 +++++++-- src/components/timeline/timeline.js | 10 ++++++++-- src/components/timeline/timeline.vue | 9 +++++++-- src/i18n/en.json | 6 ++++-- src/i18n/fi.json | 6 ++++-- src/modules/statuses.js | 7 +++++++ .../notifications_fetcher.service.js | 1 + .../timeline_fetcher/timeline_fetcher.service.js | 1 + 9 files changed, 53 insertions(+), 10 deletions(-) diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index ea32bbd0..5e95631a 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -13,6 +13,11 @@ const Notifications = { notificationsFetcher.startFetching({ store, credentials }) }, + data () { + return { + bottomedOut: false + } + }, computed: { notifications () { return notificationsFromStore(this.$store) @@ -28,6 +33,9 @@ const Notifications = { }, unseenCount () { return this.unseenNotifications.length + }, + loading () { + return this.$store.state.statuses.notifications.loading } }, components: { @@ -49,10 +57,16 @@ const Notifications = { fetchOlderNotifications () { const store = this.$store const credentials = store.state.users.currentUser.credentials + store.commit('setNotificationsLoading', { value: true }) notificationsFetcher.fetchAndUpdate({ store, credentials, older: true + }).then(notifs => { + store.commit('setNotificationsLoading', { value: false }) + if (notifs.length === 0) { + this.bottomedOut = true + } }) } } diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 64f18720..6f162b62 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -18,10 +18,15 @@
- +
+ {{$t('notifications.no_more_notifications')}} +
+
{{$t('notifications.load_older')}}
 -
...
+
+ +
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 98da8660..85e0a055 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -16,7 +16,8 @@ const Timeline = { data () { return { paused: false, - unfocused: false + unfocused: false, + bottomedOut: false } }, computed: { @@ -95,7 +96,12 @@ const Timeline = { showImmediately: true, userId: this.userId, tag: this.tag - }).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false })) + }).then(statuses => { + store.commit('setLoading', { timeline: this.timelineName, value: false }) + if (statuses.length === 0) { + this.bottomedOut = true + } + }) }, 1000, this), scrollLoad (e) { const bodyBRect = document.body.getBoundingClientRect() diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 6ba598c5..e3eea3bd 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -20,10 +20,15 @@
- +
+ {{$t('timeline.no_more_statuses')}} +
+
{{$t('timeline.load_older')}}
 -
...
+
+ +
diff --git a/src/i18n/en.json b/src/i18n/en.json index 3ff98ab0..c2f48450 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -49,7 +49,8 @@ "load_older": "Load older notifications", "notifications": "Notifications", "read": "Read!", - "repeated_you": "repeated your status" + "repeated_you": "repeated your status", + "no_more_notifications": "No more notifications" }, "post_status": { "new_status": "Post new status", @@ -317,7 +318,8 @@ "no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated", "repeated": "repeated", "show_new": "Show new", - "up_to_date": "Up-to-date" + "up_to_date": "Up-to-date", + "no_more_statuses": "No more statuses" }, "user_card": { "approve": "Approve", diff --git a/src/i18n/fi.json b/src/i18n/fi.json index 08cfb617..ee7cd4d2 100644 --- a/src/i18n/fi.json +++ b/src/i18n/fi.json @@ -26,7 +26,8 @@ "followed_you": "seuraa sinua", "notifications": "Ilmoitukset", "read": "Lue!", - "repeated_you": "toisti viestisi" + "repeated_you": "toisti viestisi", + "no_more_notifications": "Ei enempää ilmoituksia" }, "post_status": { "default": "Tulin juuri saunasta.", @@ -77,7 +78,8 @@ "load_older": "Lataa vanhempia viestejä", "repeated": "toisti", "show_new": "Näytä uudet", - "up_to_date": "Ajantasalla" + "up_to_date": "Ajantasalla", + "no_more_statuses": "Ei enempää viestejä" }, "user_card": { "follow": "Seuraa", diff --git a/src/modules/statuses.js b/src/modules/statuses.js index 04ec4dbc..56619455 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -28,6 +28,7 @@ export const defaultState = { minId: Number.POSITIVE_INFINITY, data: [], idStore: {}, + loading: false, error: false }, favorites: new Set(), @@ -348,6 +349,9 @@ export const mutations = { setError (state, { value }) { state.error = value }, + setNotificationsLoading (state, { value }) { + state.notifications.loading = value + }, setNotificationsError (state, { value }) { state.notifications.error = value }, @@ -376,6 +380,9 @@ const statuses = { setError ({ rootState, commit }, { value }) { commit('setError', { value }) }, + setNotificationsLoading ({ rootState, commit }, { value }) { + commit('setNotificationsLoading', { value }) + }, setNotificationsError ({ rootState, commit }, { value }) { commit('setNotificationsError', { value }) }, diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js index 1480cded..b69ec643 100644 --- a/src/services/notifications_fetcher/notifications_fetcher.service.js +++ b/src/services/notifications_fetcher/notifications_fetcher.service.js @@ -24,6 +24,7 @@ const fetchAndUpdate = ({store, credentials, older = false}) => { return apiService.fetchTimeline(args) .then((notifications) => { update({store, notifications, older}) + return notifications }, () => store.dispatch('setNotificationsError', { value: true })) .catch(() => store.dispatch('setNotificationsError', { value: true })) } diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js index 727f6c60..08d91b5a 100644 --- a/src/services/timeline_fetcher/timeline_fetcher.service.js +++ b/src/services/timeline_fetcher/timeline_fetcher.service.js @@ -35,6 +35,7 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId }) } update({store, statuses, timeline, showImmediately, userId}) + return statuses }, () => store.dispatch('setError', { value: true })) }