refs #167 Add lazyLoading in list timeline

src/renderer/components/TimelineSpace/Contents/Lists.vue

@@ -1,8 +1,9 @@
 <template>
-<div id="lists">
+<div name="lists">
   <div class="list-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>
 
@@ -16,17 +17,24 @@ export default {
   components: { Toot },
   computed: {
     ...mapState({
-      timeline: state => state.TimelineSpace.Contents.Lists.timeline
+      timeline: state => state.TimelineSpace.Contents.Lists.timeline,
+      lazyLoading: state => state.TimelineSpace.Contents.Lists.lazyLoading
     })
   },
   created () {
     this.load()
+    document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
   },
   watch: {
     list_id: function () {
       this.load()
     }
   },
+  destroyed () {
+    if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
+      document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
+    }
+  },
   methods: {
     load () {
       const loading = this.$loading({
@@ -49,10 +57,26 @@ export default {
     },
     updateToot (message) {
       this.$store.commit('TimelineSpace/Contents/Lists/updateToot', message)
+    },
+    onScroll (event) {
+      console.log(document.getElementsByName('lists'))
+      if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementsByName('lists')[0].clientHeight - 10) && !this.lazyloading) {
+        this.$store.dispatch('TimelineSpace/Contents/Lists/lazyFetchTimeline', {
+          list_id: this.list_id,
+          last: this.timeline[this.timeline.length - 1]
+        })
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.loading-card {
+  height: 60px;
+}
+
+.loading-card:empty {
+  height: 0;
+}
 </style>

src/renderer/store/TimelineSpace/Contents/Lists.js

@@ -3,12 +3,16 @@ import Mastodon from 'mastodon-api'
 const Lists = {
   namespaced: true,
   state: {
-    timeline: []
+    timeline: [],
+    lazyLoading: false
   },
   mutations: {
     updateTimeline (state, timeline) {
       state.timeline = timeline
     },
+    insertTimeline (state, messages) {
+      state.timeline = state.timeline.concat(messages)
+    },
     updateToot (state, message) {
       state.timeline = state.timeline.map((toot) => {
         if (toot.id === message.id) {
@@ -24,6 +28,9 @@ const Lists = {
           return toot
         }
       })
+    },
+    changeLazyLoading (state, value) {
+      state.lazyLoading = value
     }
   },
   actions: {
@@ -40,6 +47,24 @@ const Lists = {
           resolve(res)
         })
       })
+    },
+    lazyFetchTimeline ({ state, commit, rootState }, obj) {
+      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/list/${obj.list_id}`, { max_id: obj.last.id, limit: 40 }, (err, data, res) => {
+          if (err) return reject(err)
+          commit('insertTimeline', data)
+          commit('changeLazyLoading', false)
+        })
+      })
     }
   }
 }