try to use vue-virtual-scroller for timeline

src/components/timeline/timeline.js

@@ -38,7 +38,6 @@ const Timeline = {
       showScrollTop: false,
       paused: false,
       unfocused: false,
-      virtualScrollIndex: 0,
       blockingClicks: false,
     }
   },
@@ -102,20 +101,7 @@ const Timeline = {
       }
     },
     statusesToDisplay() {
-      if (!this.virtualScrollingEnabled) {
+      return new Set(this.filteredVisibleStatuses.map(({ id }) => id))
-        return new Set(this.filteredVisibleStatuses.map(({ id }) => id))
-      }
-
-      const amount = this.timeline.visibleStatusIds.size
-      const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
-      const min = Math.max(0, this.virtualScrollIndex - statusesPerSide)
-      const max = Math.min(amount, this.virtualScrollIndex + statusesPerSide)
-      return new Set(
-        this.filteredVisibleStatuses.slice(min, max).map(({ id }) => id),
-      )
-    },
-    virtualScrollingEnabled() {
-      return useMergedConfigStore().mergedConfig.virtualScrolling
     },
     ...mapState(useInterfaceStore, {
       mobileLayout: (store) => store.layoutType === 'mobile',
@@ -135,7 +121,6 @@ const Timeline = {
     }
     window.addEventListener('keydown', this.handleShortKey)
     window.addEventListener('scroll', this.handleScroll)
-    setTimeout(this.determineVisibleStatuses, 250)
   },
   unmounted() {
     this.timelineChange(null, this.timelineRef)
@@ -193,54 +178,6 @@ const Timeline = {
       1000,
       this,
     ),
-    determineVisibleStatuses() {
-      if (!this.$refs.timeline) return
-      if (!this.virtualScrollingEnabled) return
-
-      const statuses = this.$refs.timeline.children
-      if (statuses.length === 0) return
-      const cappedScrollIndex = Math.max(
-        0,
-        Math.min(this.virtualScrollIndex, statuses.length - 1),
-      )
-
-      const height = Math.max(document.body.offsetHeight, window.pageYOffset)
-
-      const centerOfScreen = window.pageYOffset + window.innerHeight * 0.5
-
-      // Start from approximating the index of some visible status by using the
-      // the center of the screen on the timeline.
-      let approxIndex = Math.min(
-        Math.floor(statuses.length * (centerOfScreen / height)),
-        statuses.length - 1,
-      )
-      let err = statuses[approxIndex].getBoundingClientRect().y
-
-      // if we have a previous scroll index that can be used, test if it's
-      // closer than the previous approximation, use it if so
-
-      const virtualScrollIndexY =
-        statuses[cappedScrollIndex].getBoundingClientRect().y
-      if (Math.abs(err) > virtualScrollIndexY) {
-        approxIndex = cappedScrollIndex
-        err = virtualScrollIndexY
-      }
-
-      // if the status is too far from viewport, check the next/previous ones if
-      // they happen to be better
-      while (err < -20 && approxIndex < statuses.length - 1) {
-        err += statuses[approxIndex].offsetHeight
-        approxIndex++
-      }
-      while (err > window.innerHeight + 100 && approxIndex > 0) {
-        approxIndex--
-        err -= statuses[approxIndex].offsetHeight
-      }
-
-      // this status is now the center point for virtual scrolling and visible
-      // statuses will be nearby statuses before and after it
-      this.virtualScrollIndex = approxIndex
-    },
     scrollLoad() {
       // TODO simplify this logic
       const bodyBRect = document.body.getBoundingClientRect()
@@ -253,7 +190,6 @@ const Timeline = {
       }
     },
     handleScroll: throttle(function (e) {
-      this.determineVisibleStatuses()
       this.scrollLoad(e)
     }, 200),
     handleVisibilityChange() {
@@ -264,9 +200,6 @@ const Timeline = {
     timelineRef(newTimeline, oldTimeline) {
       this.timelineChange(newTimeline, oldTimeline)
     },
-    filteredVisibleStatuses() {
-      this.determineVisibleStatuses()
-    },
     newStatusCount(count) {
       if (!useMergedConfigStore().mergedConfig.streaming) {
         return

src/components/timeline/timeline.scss

@@ -4,6 +4,10 @@
     backdrop-filter: none;
   }
 
+  .vue-recycle-scroller.timeline {
+    overflow: visible;
+  }
+
   .timeline-placeholder {
     background: var(--background);
     display: flex;

src/components/timeline/timeline.vue

@@ -77,23 +77,35 @@
       />
     </div>
     <div :class="classes.body">
-      <div
+      <DynamicScroller
-        ref="timeline"
         class="timeline"
+        ref="timeline"
+        :min-item-size="120"
+        :buffer="120"
+        :items="filteredVisibleStatuses"
+        :emit-update="true"
+        flow-mode
         role="feed"
       >
-        <Conversation
+        <template #default="{ item: status, index, active }">
-          v-for="status in filteredVisibleStatuses"
+          <DynamicScrollerItem
-          :key="status.id"
+            :item="status"
-          role="listitem"
+            :active="active"
-          class="status-fadein"
+            :index="index"
-          :status-id="status.id"
+            :size-dependencies="[status.status]"
-          :in-profile="inProfile"
+          >
-          :profile-user-id="timelineRef.argument"
+            <Conversation
-          :virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.has(status.id)"
+              :key="status.id"
-          collapsable
+              role="listitem"
-        />
+              class="status-fadein"
-      </div>
+              :status-id="status.id"
+              :in-profile="inProfile"
+              :profile-user-id="timelineRef.argument"
+              collapsable
+            />
+          </DynamicScrollerItem>
+        </template>
+      </DynamicScroller>
       <template v-if="!hideEmpty && count === 0">
         <div
           v-if="timeline.fetcher.loadingNewer || timeline.fetcher.loadingOlder"