virtual scrolling improvements

src/components/conversation/conversation.js

@@ -433,12 +433,6 @@ const conversation = {
     virtualHidden() {
       this.updateVirtualHeight()
     },
-    status: {
-      handler() {
-        this.updateVirtualHeight()
-      },
-      deep: true,
-    }
   },
   methods: {
     fetchConversation() {
@@ -615,9 +609,6 @@ const conversation = {
       this.threadDisplayStatusObject = {}
     },
     onStatusSuspendStateChange({ id, suspend }) {
-      this.$nextTick(() => {
-        this.virtualHeight = this.$refs.body.clientHeight
-      })
       if (!suspend) {
         this.unsuspendibleIds.add(id)
       } else {
@@ -630,8 +621,11 @@ const conversation = {
       }
     },
     updateVirtualHeight() {
-      this.$emit('update:virtualHeight', { id: this.status.id, height: this.virtualHeight })
-      this.virtualHeight = this.$refs.body.clientHeight
+      this.$nextTick(() => {
+        console.log('LMAO', this.$refs.body.clientHeight)
+        this.virtualHeight = this.$refs.body.clientHeight
+        this.$emit('update:virtualHeight', { id: this.status.id, height: this.virtualHeight, top: this.$el.clientTop })
+      })
     },
   },
 }

src/components/conversation/conversation.vue

@@ -118,6 +118,7 @@
               @goto="setFocused"
               @dive="() => diveIntoStatus(status.id)"
               @suspendable-state-change="onStatusSuspendStateChange"
+              @height-change="updateVirtualHeight"
             />
             <div
               v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
@@ -176,6 +177,7 @@
           @goto="setFocused"
           @dive="diveIntoStatus"
           @suspendable-state-change="onStatusSuspendStateChange"
+          @height-change="updateVirtualHeight"
         />
       </div>
       <div
@@ -202,6 +204,7 @@
             @goto="setFocused"
             @toggle-expanded="toggleExpanded"
             @suspendable-state-change="onStatusSuspendStateChange"
+            @height-change="updateVirtualHeight"
           />
         </article>
       </div>

src/components/status/status.js

@@ -118,7 +118,7 @@ const Status = {
 
     threadDisplayStatus: String,
   },
-  emits: ['goto', 'dive', 'toggleExpanded', 'suspendableStateChange'],
+  emits: ['goto', 'dive', 'toggleExpanded', 'suspendableStateChange', 'heightChange'],
   data() {
     return {
       replying: false,
@@ -539,6 +539,7 @@ const Status = {
       this.headTailLinks = headTailLinks
     },
     toggleThreadDisplay() {
+      // FIXME
       this.controlledToggleThreadDisplay()
     },
     scrollIfFocused(focused) {
@@ -557,8 +558,22 @@ const Status = {
         }
       }
     },
+    onTransitionEnd() {
+      this.$nextTick(() => {
+        this.$emit('heightChange')
+      })
+    },
   },
   watch: {
+    status: {
+      deep: true,
+      handler() {
+        this.$emit('heightChange')
+      },
+    },
+    replying() {
+      this.$emit('heightChange')
+    },
     focused: function (id) {
       this.scrollIfFocused(id)
     },
@@ -584,6 +599,7 @@ const Status = {
     },
     isSuspendable: function (suspend) {
       this.$emit('suspendableStateChange', { id: this.status.id, suspend })
+      this.$emit('heightChange')
     },
   },
 }

src/components/status/status.vue

@@ -454,7 +454,10 @@
             </StatusPopover>
           </div>
 
-          <transition name="fade">
+          <Transition
+            @after-leave="onTransitionEnd"
+            name="fade"
+          >
             <div
               v-if="shouldDisplayFavsAndRepeats"
               class="favs-repeated-users"
@@ -502,7 +505,7 @@
                 </div>
               </div>
             </div>
-          </transition>
+          </Transition>
 
           <EmojiReactions
             v-if="(mergedConfig.emojiReactionsOnTimeline || focused) && (!noHeading && !isPreview)"

src/components/thread_tree/thread_tree.js

@@ -30,7 +30,7 @@ const ThreadTree = {
     totalReplyCount: Object,
     totalReplyDepth: Object,
   },
-  emits: ['suspendableStateChange', 'goto', 'dive'],
+  emits: ['suspendableStateChange', 'goto', 'dive', 'heightChange'],
   computed: {
     currentReplies() {
       return this.getReplies(this.statusId).map(({ id }) => id)

src/components/thread_tree/thread_tree.vue

@@ -22,6 +22,7 @@
       @goto="$emit('goto', statusId)"
       @toggle-expanded="toggleExpanded"
       @suspendable-state-change="e => $emit('suspendableStateChange', e)"
+      @height-change="e => $emit('height-change', e)"
     />
     <div
       v-if="currentReplies.length > 0 && threadShowing"
@@ -55,6 +56,7 @@
         @goto="(e) => $emit('goto', e)"
         @dive="(e) => $emit('dive', e)"
         @suspendable-state-change="e => $emit('suspendableStateChange', e)"
+        @height-change="e => $emit('height-change', e)"
       />
     </div>
     <div

src/components/timeline/timeline.js

@@ -99,6 +99,7 @@ const Timeline = {
       }
     },
     statusesToDisplay() {
+      if (!this.virtualScrollingEnabled) return this.visibleStatusIds
       const amount = this.timeline.visibleStatusIds.size
       const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
       const min = Math.max(0, this.virtualScrollIndex - statusesPerSide)