refs #146 Add lazy loading to local timeline

src/renderer/components/TimelineSpace/Local.vue

@@ -3,6 +3,8 @@
     <div class="local-timeline" v-for="message in timeline" v-bind:key="message.id">
       <toot :message="message" v-on:update="updateToot"></toot>
     </div>
+    <div class="loading-card" v-loading="lazyLoading">
+    </div>
   </div>
 </template>
 
@@ -15,7 +17,8 @@ export default {
   components: { Toot },
   computed: {
     ...mapState({
-      timeline: state => state.TimelineSpace.Local.timeline
+      timeline: state => state.TimelineSpace.Local.timeline,
+      lazyLoading: state => state.TimelineSpace.Local.lazyLoading
     })
   },
   created () {
@@ -32,10 +35,14 @@ export default {
       .catch(() => {
         loading.close()
       })
+    window.addEventListener('scroll', this.onScroll)
   },
   beforeDestroy () {
     this.$store.dispatch('TimelineSpace/Local/stopLocalStreaming')
   },
+  destroyed () {
+    window.removeEventListener('scroll', this.onScroll)
+  },
   methods: {
     async initialize () {
       try {
@@ -50,7 +57,23 @@ export default {
     },
     updateToot (message) {
       this.$store.commit('TimelineSpace/Local/updateToot', message)
+    },
+    onScroll (event) {
+      if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('local').clientHeight - 10) && !this.lazyloading) {
+        this.$store.dispatch('TimelineSpace/Local/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
+      }
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.loading-card {
+  background-color: #ffffff;
+  height: 60px;
+}
+
+.loading-card:empty {
+  height: 0;
+}
+</style>

src/renderer/store/TimelineSpace/Local.js

@@ -4,7 +4,8 @@ import Mastodon from 'mastodon-api'
 const Local = {
   namespaced: true,
   state: {
-    timeline: []
+    timeline: [],
+    lazyLoading: false
   },
   mutations: {
     appendTimeline (state, update) {
@@ -13,6 +14,9 @@ const Local = {
     updateTimeline (state, messages) {
       state.timeline = messages
     },
+    insertTimeline (state, messages) {
+      state.timeline = state.timeline.concat(messages)
+    },
     updateToot (state, message) {
       state.timeline = state.timeline.map((toot) => {
         if (toot.id === message.id) {
@@ -28,6 +32,9 @@ const Local = {
           return toot
         }
       })
+    },
+    changeLazyLoading (state, value) {
+      state.lazyLoading = value
     }
   },
   actions: {
@@ -61,6 +68,24 @@ const Local = {
       ipcRenderer.removeAllListeners('error-start-local-streaming')
       ipcRenderer.removeAllListeners('update-start-local-streaming')
       ipcRenderer.send('stop-local-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, local: true }, (err, data, res) => {
+          if (err) return reject(err)
+          commit('TimelineSpace/Local/insertTimeline', data, { root: true })
+          commit('changeLazyLoading', false)
+        })
+      })
     }
   }
 }