From 23074387450be4b6a3f740bab08b72492570cd31 Mon Sep 17 00:00:00 2001 From: AkiraFukushima Date: Tue, 14 Sep 2021 02:02:51 +0900 Subject: [PATCH] Fix scroll position when lazyFetchTimeline at bottom of timeline --- .../TimelineSpace/Contents/DirectMessages.vue | 11 ++++++++ .../TimelineSpace/Contents/Hashtag/Tag.vue | 26 ++++++++++++++++--- .../TimelineSpace/Contents/Home.vue | 23 ++++++++++++---- .../TimelineSpace/Contents/Lists/Show.vue | 26 ++++++++++++++++--- .../TimelineSpace/Contents/Local.vue | 23 ++++++++++++---- .../TimelineSpace/Contents/Mentions.vue | 23 ++++++++++++---- .../TimelineSpace/Contents/Notifications.vue | 11 ++++++++ .../TimelineSpace/Contents/Public.vue | 23 ++++++++++++---- .../TimelineSpace/Contents/Hashtag/Tag.ts | 2 +- 9 files changed, 139 insertions(+), 29 deletions(-) diff --git a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue index 08da52eb..bb2f246f 100644 --- a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue +++ b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue @@ -175,6 +175,17 @@ export default { ) { this.$store .dispatch('TimelineSpace/Contents/DirectMessages/lazyFetchTimeline', this.timeline[this.timeline.length - 1]) + .then(statuses => { + if (statuses === null) { + return + } + if (statuses.length > 0) { + this.$store.commit('TimelineSpace/Contents/DirectMessages/changeScrolling', true) + setTimeout(() => { + this.$store.commit('TimelineSpace/Contents/DirectMessages/changeScrolling', false) + }, 500) + } + }) .catch(() => { this.$message({ message: this.$t('message.timeline_fetch_error'), diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue index 6c8e4046..8a1d2daa 100644 --- a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue +++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue @@ -178,10 +178,28 @@ export default { event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 && !this.lazyloading ) { - this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/lazyFetchTimeline', { - tag: this.tag, - status: this.timeline[this.timeline.length - 1] - }) + this.$store + .dispatch('TimelineSpace/Contents/Hashtag/Tag/lazyFetchTimeline', { + tag: this.tag, + status: this.timeline[this.timeline.length - 1] + }) + .then(statuses => { + if (statuses === null) { + return + } + if (statuses.length > 0) { + this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', true) + setTimeout(() => { + this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeScrolling', false) + }, 500) + } + }) + .catch(() => { + this.$message({ + message: this.$t('message.timeline_fetch_error'), + type: 'error' + }) + }) } if (event.target.scrollTop > 10 && this.heading) { diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue index 68b2c3d1..e80e35bc 100644 --- a/src/renderer/components/TimelineSpace/Contents/Home.vue +++ b/src/renderer/components/TimelineSpace/Contents/Home.vue @@ -172,12 +172,25 @@ export default { event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 && !this.lazyloading ) { - this.$store.dispatch('TimelineSpace/Contents/Home/lazyFetchTimeline', this.timeline[this.timeline.length - 1]).catch(() => { - this.$message({ - message: this.$t('message.timeline_fetch_error'), - type: 'error' + this.$store + .dispatch('TimelineSpace/Contents/Home/lazyFetchTimeline', this.timeline[this.timeline.length - 1]) + .then(statuses => { + if (statuses === null) { + return + } + if (statuses.length > 0) { + this.$store.commit('TimelineSpace/Contents/Home/changeScrolling', true) + setTimeout(() => { + this.$store.commit('TimelineSpace/Contents/Home/changeScrolling', false) + }, 500) + } + }) + .catch(() => { + this.$message({ + message: this.$t('message.timeline_fetch_error'), + type: 'error' + }) }) - }) } if (event.target.scrollTop > 10 && this.heading) { diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue index 8e8a2f61..a2dbd95b 100644 --- a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue +++ b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue @@ -179,10 +179,28 @@ export default { event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 && !this.lazyloading ) { - this.$store.dispatch('TimelineSpace/Contents/Lists/Show/lazyFetchTimeline', { - list_id: this.list_id, - status: this.timeline[this.timeline.length - 1] - }) + this.$store + .dispatch('TimelineSpace/Contents/Lists/Show/lazyFetchTimeline', { + list_id: this.list_id, + status: this.timeline[this.timeline.length - 1] + }) + .then(statuses => { + if (statuses === null) { + return + } + if (statuses.length > 0) { + this.$store.commit('TimelineSpace/Contents/Lists/Show/changeScrolling', true) + setTimeout(() => { + this.$store.commit('TimelineSpace/Contents/Lists/Show/changeScrolling', false) + }, 500) + } + }) + .catch(() => { + this.$message({ + message: this.$t('message.timeline_fetch_error'), + type: 'error' + }) + }) } if (event.target.scrollTop > 10 && this.heading) { diff --git a/src/renderer/components/TimelineSpace/Contents/Local.vue b/src/renderer/components/TimelineSpace/Contents/Local.vue index 15e9d9f2..8e962233 100644 --- a/src/renderer/components/TimelineSpace/Contents/Local.vue +++ b/src/renderer/components/TimelineSpace/Contents/Local.vue @@ -178,12 +178,25 @@ export default { event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 && !this.lazyloading ) { - this.$store.dispatch('TimelineSpace/Contents/Local/lazyFetchTimeline', this.timeline[this.timeline.length - 1]).catch(() => { - this.$message({ - message: this.$t('message.timeline_fetch_error'), - type: 'error' + this.$store + .dispatch('TimelineSpace/Contents/Local/lazyFetchTimeline', this.timeline[this.timeline.length - 1]) + .then(statuses => { + if (statuses === null) { + return + } + if (statuses.length > 0) { + this.$store.commit('TimelineSpace/Contents/Local/changeScrolling', true) + setTimeout(() => { + this.$store.commit('TimelineSpace/Contents/Local/changeScrolling', false) + }, 500) + } + }) + .catch(() => { + this.$message({ + message: this.$t('message.timeline_fetch_error'), + type: 'error' + }) }) - }) } if (event.target.scrollTop > 10 && this.heading) { this.$store.commit('TimelineSpace/Contents/Local/changeHeading', false) diff --git a/src/renderer/components/TimelineSpace/Contents/Mentions.vue b/src/renderer/components/TimelineSpace/Contents/Mentions.vue index 761d7e2c..819dcacc 100644 --- a/src/renderer/components/TimelineSpace/Contents/Mentions.vue +++ b/src/renderer/components/TimelineSpace/Contents/Mentions.vue @@ -151,12 +151,25 @@ export default { event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 && !this.lazyloading ) { - this.$store.dispatch('TimelineSpace/Contents/Mentions/lazyFetchMentions', this.mentions[this.mentions.length - 1]).catch(() => { - this.$message({ - message: this.$t('message.timeline_fetch_error'), - type: 'error' + this.$store + .dispatch('TimelineSpace/Contents/Mentions/lazyFetchMentions', this.mentions[this.mentions.length - 1]) + .then(statuses => { + if (statuses === null) { + return + } + if (statuses.length > 0) { + this.$store.commit('TimelineSpace/Contents/Mentions/changeScrolling', true) + setTimeout(() => { + this.$store.commit('TimelineSpace/Contents/Mentions/changeScrolling', false) + }, 500) + } + }) + .catch(() => { + this.$message({ + message: this.$t('message.timeline_fetch_error'), + type: 'error' + }) }) - }) } if (event.target.scrollTop > 10 && this.heading) { diff --git a/src/renderer/components/TimelineSpace/Contents/Notifications.vue b/src/renderer/components/TimelineSpace/Contents/Notifications.vue index fb83d4c0..cbebd9f7 100644 --- a/src/renderer/components/TimelineSpace/Contents/Notifications.vue +++ b/src/renderer/components/TimelineSpace/Contents/Notifications.vue @@ -163,6 +163,17 @@ export default { 'TimelineSpace/Contents/Notifications/lazyFetchNotifications', this.handledNotifications[this.handledNotifications.length - 1] ) + .then(statuses => { + if (statuses === null) { + return + } + if (statuses.length > 0) { + this.$store.commit('TimelineSpace/Contents/Notifications/changeScrolling', true) + setTimeout(() => { + this.$store.commit('TimelineSpace/Contents/Notifications/changeScrolling', false) + }, 500) + } + }) .catch(() => { this.$message({ message: this.$t('message.notification_fetch_error'), diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue index e18961be..3301a4bf 100644 --- a/src/renderer/components/TimelineSpace/Contents/Public.vue +++ b/src/renderer/components/TimelineSpace/Contents/Public.vue @@ -180,12 +180,25 @@ export default { event.target.clientHeight + event.target.scrollTop >= document.getElementById('scroller').scrollHeight - 10 && !this.lazyloading ) { - this.$store.dispatch('TimelineSpace/Contents/Public/lazyFetchTimeline', this.timeline[this.timeline.length - 1]).catch(() => { - this.$message({ - message: this.$t('message.timeline_fetch_error'), - type: 'error' + this.$store + .dispatch('TimelineSpace/Contents/Public/lazyFetchTimeline', this.timeline[this.timeline.length - 1]) + .then(statuses => { + if (statuses === null) { + return + } + if (statuses.length > 0) { + this.$store.commit('TimelineSpace/Contents/Public/changeScrolling', true) + setTimeout(() => { + this.$store.commit('TimelineSpace/Contents/Public/changeScrolling', false) + }, 500) + } + }) + .catch(() => { + this.$message({ + message: this.$t('message.timeline_fetch_error'), + type: 'error' + }) }) - }) } if (event.target.scrollTop > 10 && this.heading) { diff --git a/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts b/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts index a571e61c..e125ce74 100644 --- a/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts +++ b/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts @@ -131,7 +131,7 @@ const actions: ActionTree = { resolve(null) }) }, - lazyFetchTimeline: async ({ state, commit, rootState }, loadPosition: LoadPositionWithTag) => { + lazyFetchTimeline: async ({ state, commit, rootState }, loadPosition: LoadPositionWithTag): Promise | null> => { if (state.lazyLoading) { return Promise.resolve(null) }