Commit 62e95257 authored by Shpuld Shpludson's avatar Shpuld Shpludson

Add loading indicator for notifications, make timelines indicate bottoming out...

Add loading indicator for notifications, make timelines indicate bottoming out when no more statuses
parent 3cfbf014
......@@ -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
}
})
}
}
......
......@@ -18,10 +18,15 @@
</div>
</div>
<div class="panel-footer">
<a href="#" v-on:click.prevent='fetchOlderNotifications()' v-if="!notifications.loading">
<div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
{{$t('notifications.no_more_notifications')}}
</div>
<a v-else-if="!loading" href="#" v-on:click.prevent="fetchOlderNotifications()">
<div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div>
</a>
<div class="new-status-notification text-center panel-footer" v-else>...</div>
<div v-else class="new-status-notification text-center panel-footer">
<i class="icon-spin3 animate-spin"/>
</div>
</div>
</div>
</div>
......
......@@ -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()
......
......@@ -20,10 +20,15 @@
</div>
</div>
<div :class="classes.footer">
<a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
<div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
{{$t('timeline.no_more_statuses')}}
</div>
<a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'>
<div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div>
</a>
<div class="new-status-notification text-center panel-footer" v-else>...</div>
<div v-else class="new-status-notification text-center panel-footer">
<i class="icon-spin3 animate-spin"/>
</div>
</div>
</div>
</template>
......
......@@ -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",
......
......@@ -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",
......
......@@ -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 })
},
......
......@@ -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 }))
}
......
......@@ -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 }))
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment