diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Followers.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Followers.vue index b41d4978..8dfc62b0 100644 --- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Followers.vue +++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Followers.vue @@ -8,6 +8,7 @@ +
@@ -22,7 +23,11 @@ export default { computed: { ...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Followers', { followers: state => state.followers, - relationships: state => state.relationships + relationships: state => state.relationships, + lazyLoading: state => state.lazyLoading + }), + ...mapState('App', { + backgroundColor: state => state.theme.background_color }) }, created() { @@ -33,6 +38,14 @@ export default { 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) + } + }, methods: { async load() { this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true) @@ -48,6 +61,21 @@ export default { this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false) } }, + 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/Followers/lazyFetchFollowers', this.account).catch(err => { + console.error(err) + this.$message({ + message: this.$t('message.timeline_fetch_error'), + type: 'error' + }) + }) + } + }, targetRelation(id) { return this.relationships.find(r => r.id === id) }, @@ -83,4 +111,12 @@ export default { } - + diff --git a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Followers.ts b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Followers.ts index 6a0c0afd..c43d4f68 100644 --- a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Followers.ts +++ b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile/Followers.ts @@ -1,28 +1,45 @@ import generator, { Entity } from 'megalodon' +import parse from 'parse-link-header' import { Module, MutationTree, ActionTree } from 'vuex' import { RootState } from '@/store' export type FollowersState = { followers: Array