experiment with storing heights in vuex

src/components/conversation/conversation.js

@@ -35,9 +35,7 @@ const conversation = {
   data () {
     return {
       highlight: null,
-      expanded: false,
+      expanded: false
-      // Approximate minimum height of a status, gets overwritten with real one
-      virtualHeight: '120px'
     }
   },
   props: [
@@ -114,7 +112,8 @@ const conversation = {
       return this.expanded || this.isPage
     },
     hiddenStyle () {
-      return this.virtualHidden ? { height: this.virtualHeight } : {}
+      const height = this.status.virtualHeight || '120px'
+      return this.virtualHidden ? { height } : {}
     }
   },
   components: {
@@ -136,7 +135,10 @@ const conversation = {
       }
     },
     virtualHidden (value) {
-      this.virtualHeight = `${this.$el.clientHeight}px`
+      this.$store.dispatch(
+        'setVirtualHeight',
+        { statusId: this.statusId, height: `${this.$el.clientHeight}px` }
+      )
     }
   },
   methods: {

src/components/timeline/timeline.js

@@ -113,6 +113,7 @@ const Timeline = {
       this.unfocused = document.hidden
     }
     window.addEventListener('keydown', this.handleShortKey)
+    setTimeout(this.determineVisibleStatuses, 250)
   },
   destroyed () {
     window.removeEventListener('scroll', this.handleScroll)
@@ -159,6 +160,8 @@ const Timeline = {
       if (!this.$refs.timeline) return
       if (!this.virtualScrollingEnabled) return
 
+      console.log('determineVisibleStatuses', window.pageYOffset)
+
       const statuses = this.$refs.timeline.children
       const cappedScrollIndex = Math.max(0, Math.min(this.virtualScrollIndex, statuses.length - 1))
 
@@ -184,7 +187,7 @@ const Timeline = {
 
       // if the status is too far from viewport, check the next/previous ones if
       // they happen to be better
-      while (err < -100 && approxIndex < statuses.length - 1) {
+      while (err < -20 && approxIndex < statuses.length - 1) {
         err += statuses[approxIndex].offsetHeight
         approxIndex++
       }
@@ -196,6 +199,8 @@ const Timeline = {
       // this status is now the center point for virtual scrolling and visible
       // statuses will be nearby statuses before and after it
       this.virtualScrollIndex = approxIndex
+      console.log('result', statuses[approxIndex], statuses[approxIndex].getBoundingClientRect().y, err)
+      console.log(window.pageYOffset, statuses[approxIndex].offsetTop)
     },
     scrollLoad (e) {
       const bodyBRect = document.body.getBoundingClientRect()
@@ -210,7 +215,7 @@ const Timeline = {
     handleScroll: throttle(function (e) {
       this.determineVisibleStatuses()
       this.scrollLoad(e)
-    }, 150),
+    }, 200),
     handleVisibilityChange () {
       this.unfocused = document.hidden
     }

src/modules/statuses.js

@@ -597,6 +597,9 @@ export const mutations = {
   updateStatusWithPoll (state, { id, poll }) {
     const status = state.allStatusesObject[id]
     status.poll = poll
+  },
+  setVirtualHeight (state, { statusId, height }) {
+    state.allStatusesObject[statusId].virtualHeight = height
   }
 }
 
@@ -777,6 +780,9 @@ const statuses = {
           store.commit('addNewStatuses', { statuses: data.statuses })
           return data
         })
+    },
+    setVirtualHeight ({ commit }, { statusId, height }) {
+      commit('setVirtualHeight', { statusId, height })
     }
   },
   mutations