restored virtual scrolling things

src/components/conversation/conversation.js

@@ -1,6 +1,15 @@
 import { get } from 'lodash-es'
 import { storeToRefs } from 'pinia'
-import { computed, nextTick, provide, ref, toRefs, watch } from 'vue'
+import {
+  computed,
+  nextTick,
+  onMounted,
+  provide,
+  ref,
+  toRefs,
+  useTemplateRef,
+  watch,
+} from 'vue'
 import { useRouter } from 'vue-router'
 
 import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
@@ -251,7 +260,12 @@ export default {
     }
 
     // # Virtual scrolling stuff
+    const body = useTemplateRef('body')
     const { virtualHidden } = toRefs(props)
+    const virtualHeight = ref(120)
+    const hiddenStyle = computed(() => ({
+      height: this.virtualHeight + 'px',
+    }))
     const unsuspendibleIds = ref(new Set())
     const suspendable = computed(() => unsuspendibleIds.value.size === 0)
     const hide = computed(() => virtualHidden.value && suspendable.value)
@@ -262,6 +276,21 @@ export default {
         unsuspendibleIds.value.delete(id)
       }
     }
+    const updateVirtualHeight = () => {
+      if (hide) return // no updates when not rendering
+      if (!status.value) return // not loaded yet
+      nextTick(() => {
+        virtualHeight.value = body.value.getBoundingClientRect().height
+        emit('update:virtualHeight', {
+          id: status.value.id,
+          height: virtualHeight.value,
+          top: body.value.clientTop,
+        })
+      })
+    }
+    onMounted(() => {
+      updateVirtualHeight()
+    })
 
     // # Misc UI things
     const firstStatus = computed(() => conversation.value[0])
@@ -437,7 +466,9 @@ export default {
       // # Virtual scrolling stuff
       hide,
       onStatusSuspendStateChange,
+      updateVirtualHeight,
       virtualHidden,
+      hiddenStyle,
 
       // # Misc UI things
       getStatusClasses,

src/components/conversation/conversation.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="!hide"
+    ref="body"
     class="Conversation"
     :class="{ '-expanded' : isExpanded, '-page': isPage, 'panel' : isExpanded }"
   >
@@ -39,7 +40,6 @@
     <div
       v-if="isPage && !status"
       class="conversation-body"
-      ref="body"
       :class="{ 'panel-body': isExpanded }"
     >
       <p v-if="!loadStatusError">
@@ -56,7 +56,6 @@
     <div
       v-else
       class="conversation-body"
-      ref="body"
       :class="{ 'panel-body': isExpanded }"
     >
       <div
@@ -108,6 +107,7 @@
               @goto="setFocused"
               @dive="diveIntoStatus(status.id)"
               @suspendable-state-change="onStatusSuspendStateChange"
+              @height-change="updateVirtualHeight"
             />
             <div
               v-if="shouldShowOtherRepliesButton && statusReplies.size > 1"
@@ -147,6 +147,7 @@
           @toggle-expanded="toggleExpanded"
           @show-thread-recursively="showThreadRecursively"
           @suspendable-state-change="onStatusSuspendStateChange"
+          @height-change="updateVirtualHeight"
         />
       </div>
       <div
@@ -169,6 +170,7 @@
             @goto="setFocused"
             @toggle-expanded="toggleExpanded"
             @suspendable-state-change="onStatusSuspendStateChange"
+            @height-change="updateVirtualHeight"
           />
         </article>
       </div>