mirror of
https://github.com/h3poteto/whalebird-desktop
synced 2025-02-06 04:13:36 +01:00
refs #146 Add lazy loading to public timeline
This commit is contained in:
parent
ed6a745c72
commit
a929feddc3
@ -3,6 +3,8 @@
|
|||||||
<div class="public-timeline" v-for="message in timeline" v-bind:key="message.id">
|
<div class="public-timeline" v-for="message in timeline" v-bind:key="message.id">
|
||||||
<toot :message="message" v-on:update="updateToot"></toot>
|
<toot :message="message" v-on:update="updateToot"></toot>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="loading-card" v-loading="lazyLoading">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -15,7 +17,8 @@ export default {
|
|||||||
components: { Toot },
|
components: { Toot },
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
timeline: state => state.TimelineSpace.Public.timeline
|
timeline: state => state.TimelineSpace.Public.timeline,
|
||||||
|
lazyLoading: state => state.TimelineSpace.Public.lazyLoading
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
@ -32,10 +35,14 @@ export default {
|
|||||||
.catch(() => {
|
.catch(() => {
|
||||||
loading.close()
|
loading.close()
|
||||||
})
|
})
|
||||||
|
window.addEventListener('scroll', this.onScroll)
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
this.$store.dispatch('TimelineSpace/Public/stopPublicStreaming')
|
this.$store.dispatch('TimelineSpace/Public/stopPublicStreaming')
|
||||||
},
|
},
|
||||||
|
destroyed () {
|
||||||
|
window.removeEventListener('scroll', this.onScroll)
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async initialize () {
|
async initialize () {
|
||||||
try {
|
try {
|
||||||
@ -50,7 +57,23 @@ export default {
|
|||||||
},
|
},
|
||||||
updateToot (message) {
|
updateToot (message) {
|
||||||
this.$store.commit('TimelineSpace/Public/updateToot', message)
|
this.$store.commit('TimelineSpace/Public/updateToot', message)
|
||||||
|
},
|
||||||
|
onScroll (event) {
|
||||||
|
if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('public').clientHeight - 10) && !this.lazyloading) {
|
||||||
|
this.$store.dispatch('TimelineSpace/Public/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.loading-card {
|
||||||
|
background-color: #ffffff;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-card:empty {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
@ -4,7 +4,8 @@ import Mastodon from 'mastodon-api'
|
|||||||
const Public = {
|
const Public = {
|
||||||
namespaced: true,
|
namespaced: true,
|
||||||
state: {
|
state: {
|
||||||
timeline: []
|
timeline: [],
|
||||||
|
lazyLoading: false
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
appendTimeline (state, update) {
|
appendTimeline (state, update) {
|
||||||
@ -13,6 +14,9 @@ const Public = {
|
|||||||
updateTimeline (state, messages) {
|
updateTimeline (state, messages) {
|
||||||
state.timeline = messages
|
state.timeline = messages
|
||||||
},
|
},
|
||||||
|
insertTimeline (state, messages) {
|
||||||
|
state.timeline = state.timeline.concat(messages)
|
||||||
|
},
|
||||||
updateToot (state, message) {
|
updateToot (state, message) {
|
||||||
state.timeline = state.timeline.map((toot) => {
|
state.timeline = state.timeline.map((toot) => {
|
||||||
if (toot.id === message.id) {
|
if (toot.id === message.id) {
|
||||||
@ -28,6 +32,9 @@ const Public = {
|
|||||||
return toot
|
return toot
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
changeLazyLoading (state, value) {
|
||||||
|
state.lazyLoading = value
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
@ -61,6 +68,24 @@ const Public = {
|
|||||||
ipcRenderer.removeAllListeners('error-start-public-streaming')
|
ipcRenderer.removeAllListeners('error-start-public-streaming')
|
||||||
ipcRenderer.removeAllListeners('update-start-public-streaming')
|
ipcRenderer.removeAllListeners('update-start-public-streaming')
|
||||||
ipcRenderer.send('stop-public-streaming')
|
ipcRenderer.send('stop-public-streaming')
|
||||||
|
},
|
||||||
|
lazyFetchTimeline ({ state, commit, rootState }, last) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (state.lazyLoading) {
|
||||||
|
return resolve()
|
||||||
|
}
|
||||||
|
commit('changeLazyLoading', true)
|
||||||
|
const client = new Mastodon(
|
||||||
|
{
|
||||||
|
access_token: rootState.TimelineSpace.account.accessToken,
|
||||||
|
api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
|
||||||
|
})
|
||||||
|
client.get('/timelines/public', { max_id: last.id, limit: 40 }, (err, data, res) => {
|
||||||
|
if (err) return reject(err)
|
||||||
|
commit('TimelineSpace/Public/insertTimeline', data, { root: true })
|
||||||
|
commit('changeLazyLoading', false)
|
||||||
|
})
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user