refs #282 Add lazyLoading in account profile timeline
This commit is contained in:
parent
f0f3c61a87
commit
10b9dbdb09
|
@ -5,7 +5,7 @@
|
||||||
<i class="el-icon-loading" v-show="loading"></i>
|
<i class="el-icon-loading" v-show="loading"></i>
|
||||||
<i class="el-icon-close" @click="close"></i>
|
<i class="el-icon-close" @click="close"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="scrollable">
|
<div id="sidebar_scrollable">
|
||||||
<account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
|
<account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
|
||||||
<toot-detail v-if="component === 2"></toot-detail>
|
<toot-detail v-if="component === 2"></toot-detail>
|
||||||
</div>
|
</div>
|
||||||
|
@ -72,7 +72,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrollable {
|
#sidebar_scrollable {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
height: calc(100% - 30px);
|
height: calc(100% - 30px);
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,6 +3,8 @@
|
||||||
<template v-for="message in timeline">
|
<template v-for="message in timeline">
|
||||||
<toot :message="message" :key="message.id" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
|
<toot :message="message" :key="message.id" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
|
||||||
</template>
|
</template>
|
||||||
|
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -16,12 +18,22 @@ export default {
|
||||||
components: { Toot },
|
components: { Toot },
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
timeline: state => state.TimelineSpace.Contents.SideBar.AccountProfile.Timeline.timeline
|
timeline: state => state.TimelineSpace.Contents.SideBar.AccountProfile.Timeline.timeline,
|
||||||
|
lazyLoading: state => state.TimelineSpace.Contents.SideBar.AccountProfile.Timeline.lazyLoading,
|
||||||
|
backgroundColor: state => state.App.theme.background_color
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
this.load()
|
this.load()
|
||||||
},
|
},
|
||||||
|
mounted () {
|
||||||
|
document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
|
||||||
|
},
|
||||||
|
destroyed () {
|
||||||
|
if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
|
||||||
|
document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
|
||||||
|
}
|
||||||
|
},
|
||||||
watch: {
|
watch: {
|
||||||
account: function (newAccount, oldAccount) {
|
account: function (newAccount, oldAccount) {
|
||||||
this.load()
|
this.load()
|
||||||
|
@ -37,6 +49,23 @@ export default {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
onScroll (event) {
|
||||||
|
// for lazyLoading
|
||||||
|
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('account_profile').clientHeight - 10) && !this.lazyloading) {
|
||||||
|
this.$store.dispatch(
|
||||||
|
'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/lazyFetchTimeline',
|
||||||
|
{
|
||||||
|
account: this.account,
|
||||||
|
last: this.timeline[this.timeline.length - 1]
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.$message({
|
||||||
|
message: 'Could not fetch account timeline',
|
||||||
|
type: 'error'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
updateToot (message) {
|
updateToot (message) {
|
||||||
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/updateToot', message)
|
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/updateToot', message)
|
||||||
},
|
},
|
||||||
|
@ -48,4 +77,11 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.loading-card {
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-card:empty {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -97,9 +97,9 @@ const Home = {
|
||||||
api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
|
api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
|
||||||
})
|
})
|
||||||
client.get('/timelines/home', { max_id: last.id, limit: 40 }, (err, data, res) => {
|
client.get('/timelines/home', { max_id: last.id, limit: 40 }, (err, data, res) => {
|
||||||
|
commit('changeLazyLoading', false)
|
||||||
if (err) return reject(err)
|
if (err) return reject(err)
|
||||||
commit('insertTimeline', data)
|
commit('insertTimeline', data)
|
||||||
commit('changeLazyLoading', false)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,12 +3,19 @@ import Mastodon from 'mastodon-api'
|
||||||
const Timeline = {
|
const Timeline = {
|
||||||
namespaced: true,
|
namespaced: true,
|
||||||
state: {
|
state: {
|
||||||
timeline: []
|
timeline: [],
|
||||||
|
lazyLoading: false
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
updateTimeline (state, timeline) {
|
updateTimeline (state, timeline) {
|
||||||
state.timeline = timeline
|
state.timeline = timeline
|
||||||
},
|
},
|
||||||
|
insertTimeline (state, messages) {
|
||||||
|
state.timeline = state.timeline.concat(messages)
|
||||||
|
},
|
||||||
|
changeLazyLoading (state, value) {
|
||||||
|
state.lazyLoading = value
|
||||||
|
},
|
||||||
updateToot (state, message) {
|
updateToot (state, message) {
|
||||||
// Replace target message in timeline
|
// Replace target message in timeline
|
||||||
state.timeline = state.timeline.map((toot) => {
|
state.timeline = state.timeline.map((toot) => {
|
||||||
|
@ -52,6 +59,28 @@ const Timeline = {
|
||||||
resolve(res)
|
resolve(res)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
lazyFetchTimeline ({ state, commit, rootState }, info) {
|
||||||
|
const last = info.last
|
||||||
|
if (last === undefined || last === null) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
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(`/accounts/${info.account.id}/statuses`, { max_id: last.id, limit: 40 }, (err, data, res) => {
|
||||||
|
commit('changeLazyLoading', false)
|
||||||
|
if (err) return reject(err)
|
||||||
|
commit('insertTimeline', data)
|
||||||
|
})
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue