kinda really sorta working

routes/_components/Status.html

@@ -190,13 +190,10 @@
     components: {
       Avatar
     },
-    data: () => ({
-      status: null,
-    }),
     computed: {
-      relativeDate: (status) => {
+      createdAtDate: (status) => status.created_at,
-        let date = new Date(status.created_at)
+      relativeDate: (createdAtDate) => {
-        return relativeFormat.format(date)
+        return relativeFormat.format(new Date(createdAtDate))
       },
       original: (status) => status.reblog ? status.reblog.account : status.account
     },

routes/_components/VirtualList.html

@@ -1,12 +1,11 @@
-<:Window bind:scrollY='scrollY' bind:innerHeight='innerHeight' />
+<:Window bind:scrollY='scrollY' bind:innerHeight='innerHeight'/>
 <div class="virtual-list" ref:node style="height: {{$height}}px;">
   <!-- <div class="virtual-list-viewport" ref:viewport></div> -->
-  {{#each $visibleItems as item, index @key}}
+  {{#each $visibleItems as item @key}}
   <VirtualListItem :component
                    offset="{{item.offset}}"
                    props="{{item.props}}"
                    key="{{item.key}}"
-                     index="{{item.index}}"
   />
   {{/each}}
 </div>
@@ -20,14 +19,16 @@
   import { virtualListStore } from '../_utils/virtualListStore'
   import debounce from 'lodash/debounce'
 
+  const DEBOUNCE_TIME = 200
+
   export default {
-    oncreate() {
+    oncreate () {
-      this.observe('innerHeight', innerHeight => {
+      this.observe('innerHeight', debounce(innerHeight => {
         console.log('setting innerHeight', innerHeight)
         this.store.set({
           innerHeight: innerHeight
         })
-      })
+      }, DEBOUNCE_TIME))
       this.observe('items', (items) => {
         console.log('setting items')
         this.store.set({
@@ -39,7 +40,7 @@
         this.store.set({
           scrollTop: scrollY
         })
-      }, 2000))
+      }, DEBOUNCE_TIME))
     },
     data: () => ({
       component: null

routes/_components/VirtualListItem.html

@@ -1,8 +1,6 @@
 <div class="virtual-list-item"
      ref:node
      style="transform: translate3d(0, {{offset}}px, 0);"
-     data-virtual-key="{{key}}"
-     data-virtual-index="{{index}}"
 >
   <:Component {component} virtualProps="{{props}}" />
 </div>

routes/_utils/virtualListStore.js

@@ -15,35 +15,42 @@ virtualListStore.compute('visibleItems',
     ['items', 'scrollTop', 'height', 'itemHeights', 'innerHeight'],
     (items, scrollTop, height, itemHeights, innerHeight) => {
   let visibleItems = []
-  let currentOffset = 0
+  let totalOffset = 0
-  items.forEach((item, index) => {
+  let len = items.length
-    let { props, key } = item
+  let i = -1
+  while (++i < len) {
+    let { props, key } = items[i]
     let height = itemHeights[key] || 0
-    console.log(key, 'scrollTop', scrollTop, 'currentOffset', currentOffset, 'innerHeight', innerHeight)
+    let currentOffset = totalOffset
-    if (
+    totalOffset += height
-      ((currentOffset < scrollTop)  && (scrollTop - RENDER_BUFFER < currentOffset)) ||
+    //console.log(key, 'scrollTop', scrollTop, 'currentOffset', currentOffset, 'innerHeight', innerHeight)
-      ((currentOffset >= scrollTop) && (currentOffset < (scrollTop + innerHeight + RENDER_BUFFER)))
+    let isBelowViewport = (currentOffset < scrollTop)
-    ) {
+    if (isBelowViewport) {
-      console.log('    rendering', key)
+      if (scrollTop - RENDER_BUFFER > currentOffset) {
+        continue // below the area we want to render
+      }
+    } else {
+      if (currentOffset > (scrollTop + innerHeight + RENDER_BUFFER)) {
+        break // above the area we want to render
+      }
+    }
     visibleItems.push({
       offset: currentOffset,
       props: props,
       key: key,
-        index: index
+      index: i
     })
-    } else {
-      console.log('not rendering', key)
   }
-    currentOffset += height
-  })
   return visibleItems
 })
 
 virtualListStore.compute('height', ['items', 'itemHeights'], (items, itemHeights) => {
   let sum = 0
-  items.forEach(item => {
+  let i = -1
-    sum += itemHeights[item.key] || 0
+  let len = items.length
-  })
+  while (++i < len) {
+    sum += itemHeights[items[i].key] || 0
+  }
   return sum
 })