restore old virtual scrolling

src/components/conversation/conversation.js

@@ -263,7 +263,7 @@ export default {
     const body = useTemplateRef('body')
     const virtualHeight = ref(120)
     const hiddenStyle = computed(() => ({
-      height: this.virtualHeight + 'px',
+      height: virtualHeight.value + 'px',
     }))
     const updateVirtualHeight = () => {
       if (hide) return // no updates when not rendering

src/components/timeline/timeline.js

@@ -38,6 +38,7 @@ const Timeline = {
       showScrollTop: false,
       paused: false,
       unfocused: false,
+      virtualScrollIndex: 0,
       blockingClicks: false,
     }
   },
@@ -106,7 +107,20 @@ const Timeline = {
       }
     },
     statusesToDisplay() {
-      return new Set(this.filteredVisibleStatuses.map(({ id }) => id))
+      if (!this.virtualScrollingEnabled) {
+        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',
@@ -126,6 +140,7 @@ const Timeline = {
     }
     window.addEventListener('keydown', this.handleShortKey)
     window.addEventListener('scroll', this.handleScroll)
+    setTimeout(this.determineVisibleStatuses, 250)
   },
   unmounted() {
     this.timelineChange(null, this.timelineRef)
@@ -183,6 +198,54 @@ 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()
@@ -195,6 +258,7 @@ const Timeline = {
       }
     },
     handleScroll: throttle(function (e) {
+      this.determineVisibleStatuses()
       this.scrollLoad(e)
     }, 200),
     handleVisibilityChange() {

src/components/timeline/timeline.vue

@@ -77,30 +77,19 @@
       />
     </div>
     <div :class="classes.body">
-      <DynamicScroller
+      <div
         class="timeline"
         ref="timeline"
-        :min-item-size="15"
-        :buffer="120"
-        :items="filteredVisibleStatuses"
-        flow-mode
-        page-mode
         role="feed"
       >
-        <template #default="{ item: status, active }">
+        <Conversation
-          <DynamicScrollerItem
+          v-for="status in filteredVisibleStatuses"
-            :item="status"
+          :key="status.id"
-            :active="active"
+          :status-id="status.id"
-          >
+          :virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.has(status.id)"
-            <Conversation
+          role="listitem"
-              :key="status.id"
+        />
-              role="listitem"
+      </div>
-              :status-id="status.id"
-              collapsable
-            />
-          </DynamicScrollerItem>
-        </template>
-      </DynamicScroller>
       <template v-if="!hideEmpty && count === 0">
         <div
           v-if="timeline.fetcher.loadingNewer || timeline.fetcher.loadingOlder"