feat: add virtual scroller support to paginator for timeline (#146)

components/common/CommonPaginator.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { DynamicScroller } from 'vue-virtual-scroller'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import type { Paginator } from 'masto'
 
-const { paginator, keyProp = 'id' } = defineProps<{
+const { paginator, keyProp = 'id', virtualScroller = false } = defineProps<{
   paginator: Paginator<any, any[]>
   keyProp?: string
+  virtualScroller: boolean
 }>()
 
 const { items, state, endAnchor, error } = usePaginator(paginator)
@@ -11,11 +14,18 @@ const { items, state, endAnchor, error } = usePaginator(paginator)
 
 <template>
   <div>
-    <slot
-      v-for="item of items"
-      :key="item[keyProp]"
-      :item="item"
-    />
+    <template v-if="virtualScroller">
+      <DynamicScroller v-slot="{ item, active }" :items="items" :min-item-size="200" page-mode>
+        <slot :item="item" :active="active" />
+      </DynamicScroller>
+    </template>
+    <template v-else>
+      <slot
+        v-for="item of items"
+        :key="item[keyProp]"
+        :item="item"
+      />
+    </template>
     <div ref="endAnchor" />
     <div v-if="state === 'loading'" p5 text-center flex="~ col" items-center animate-pulse>
       <div op50 i-ri:loader-2-fill animate-spin text-2xl />

components/timeline/TimelinePaginator.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { DynamicScrollerItem } from 'vue-virtual-scroller'
 import type { Paginator, Status } from 'masto'
 
 const { paginator } = defineProps<{
@@ -7,12 +8,14 @@ const { paginator } = defineProps<{
 </script>
 
 <template>
-  <CommonPaginator :paginator="paginator">
-    <template #default="{ item }">
-      <StatusCard
-        :status="item"
-        border="b base" py-3
-      />
+  <CommonPaginator :paginator="paginator" virtual-scroller>
+    <template #default="{ item, active }">
+      <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.text]">
+        <StatusCard
+          :status="item"
+          border="b base" py-3
+        />
+      </DynamicScrollerItem>
     </template>
   </CommonPaginator>
 </template>