virtual scrolling improvements

src/components/conversation/conversation.js

@@ -93,6 +93,7 @@ const conversation = {
       default: false,
     },
   },
+  emits: ['update:virtualHeight'],
   data() {
     return {
       focused: null,
@@ -101,6 +102,7 @@ const conversation = {
       inlineDivePosition: null,
       loadStatusError: null,
       unsuspendibleIds: new Set(),
+      virtualHeight: 120,
     }
   },
   created() {
@@ -108,6 +110,9 @@ const conversation = {
       this.fetchConversation()
     }
   },
+  mounted() {
+    this.updateVirtualHeight()
+  },
   computed: {
     status() {
       return useStatusesStore().allStatuses.get(this.statusId)
@@ -360,8 +365,8 @@ const conversation = {
       return !!(this.expanded || this.isPage)
     },
     hiddenStyle() {
-      const height = this.status?.virtualHeight || '120px'
+      if (this.expanded) return {}
-      return this.virtualHidden ? { height } : {}
+      return { height: this.virtualHeight + 'px' }
     },
     threadDisplayStatus() {
       return this.conversation.reduce((a, k) => {
@@ -426,11 +431,14 @@ const conversation = {
       }
     },
     virtualHidden() {
-      useStatusesStore().setVirtualHeight({
+      this.updateVirtualHeight()
-        statusId: this.statusId,
-        height: `${this.$el.clientHeight}px`,
-      })
     },
+    status: {
+      handler() {
+        this.updateVirtualHeight()
+      },
+      deep: true,
+    }
   },
   methods: {
     fetchConversation() {
@@ -607,6 +615,9 @@ const conversation = {
       this.threadDisplayStatusObject = {}
     },
     onStatusSuspendStateChange({ id, suspend }) {
+      this.$nextTick(() => {
+        this.virtualHeight = this.$refs.body.clientHeight
+      })
       if (!suspend) {
         this.unsuspendibleIds.add(id)
       } else {
@@ -618,6 +629,10 @@ const conversation = {
         this.$router.push({ name: 'conversation', params: { id: data.id } })
       }
     },
+    updateVirtualHeight() {
+      this.$emit('update:virtualHeight', { id: this.status.id, height: this.virtualHeight })
+      this.virtualHeight = this.$refs.body.clientHeight
+    },
   },
 }
 

src/components/conversation/conversation.vue

@@ -40,6 +40,7 @@
     <div
       v-if="isPage && !status"
       class="conversation-body"
+      ref="body"
       :class="{ 'panel-body': isExpanded }"
     >
       <p v-if="!loadStatusError">
@@ -56,6 +57,7 @@
     <div
       v-else
       class="conversation-body"
+      ref="body"
       :class="{ 'panel-body': isExpanded }"
     >
       <div

src/stores/statuses.js

@@ -540,10 +540,5 @@ export const useStatusesStore = defineStore('statuses', {
       })
       return removed
     },
-
-    // Misc
-    setVirtualHeight({ statusId, height }) {
-      this.allStatuses.get(statusId).virtualHeight = height
-    },
   },
 })