kinda working better

routes/_components/Avatar.html

@@ -25,11 +25,12 @@
 <script>
   export default {
     computed: {
-      imagePromise: (account) => new Promise((resolve, reject) => {
+      imageSrc: (account) => account.avatar,
+      imagePromise: (imageSrc) => new Promise((resolve, reject) => {
         let img = new Image()
         img.onload = resolve
         img.onerror = reject
-        img.src = account.avatar
+        img.src = imageSrc
       })
     }
   }

routes/_components/VirtualList.html

@@ -1,12 +1,12 @@
 <: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, virtualIndex}}
+  {{#each $visibleItems as item, index @key}}
     <VirtualListItem :component
                      offset="{{item.offset}}"
-                     props="{{item.item.props}}"
-                     index="{{item.item.index}}"
-                     key="{{item.item.key}}"
+                     props="{{item.props}}"
+                     key="{{item.key}}"
+                     index="{{item.index}}"
     />
   {{/each}}
 </div>
@@ -18,29 +18,28 @@
 <script>
   import VirtualListItem from './VirtualListItem'
   import { virtualListStore } from '../_utils/virtualListStore'
+  import debounce from 'lodash/debounce'
 
   export default {
     oncreate() {
-      console.log('scrollHeight', this.refs.node.scrollHeight)
-      this.store.set({
-        scrollHeight: this.refs.node.scrollHeight,
-      })
       this.observe('innerHeight', innerHeight => {
+        console.log('setting innerHeight', innerHeight)
         this.store.set({
           innerHeight: innerHeight
         })
       })
       this.observe('items', (items) => {
+        console.log('setting items')
         this.store.set({
           'items': items
         })
       })
-      this.observe('scrollY', (scrollY) => {
-        console.log('scrollY', scrollY)
+      this.observe('scrollY', debounce((scrollY) => {
+        console.log('setting scrollY', scrollY)
         this.store.set({
           scrollTop: scrollY
         })
-      })
+      }, 2000))
     },
     data: () => ({
       component: null

routes/_components/VirtualListItem.html

@@ -1,8 +1,8 @@
 <div class="virtual-list-item"
      ref:node
      style="transform: translate3d(0, {{offset}}px, 0);"
-     data-virtual-index="{{index}}"
      data-virtual-key="{{key}}"
+     data-virtual-index="{{index}}"
 >
   <:Component {component} virtualProps="{{props}}" />
 </div>
@@ -18,9 +18,13 @@
 
   export default {
     oncreate() {
+      'VirtualListItem: oncreate'
       let itemHeights = this.store.get('itemHeights')
-      itemHeights[this.get('key')] = this.refs.node.offsetHeight
-      this.store.set({itemHeights: itemHeights})
+      let key = this.get('key')
+      itemHeights[key] = this.refs.node.offsetHeight
+      this.store.set({
+        itemHeights: itemHeights
+      })
     },
     store: () => virtualListStore
   }

routes/_utils/virtualListStore.js

@@ -8,46 +8,40 @@ class VirtualListStore extends Store {
 const virtualListStore = new VirtualListStore({
   items: [],
   itemHeights: {},
-  scrollTop: 0,
-  scrollHeight: 0
-})
-
-virtualListStore.compute('virtualItems', ['items'], (items) => {
-  return items.map((item, idx) => ({
-    props: item.props,
-    key: item.key,
-    index: idx
-  }))
+  scrollTop: 0
 })
 
 virtualListStore.compute('visibleItems',
-    ['virtualItems', 'scrollTop', 'height', 'itemHeights', 'innerHeight'],
-    (virtualItems, scrollTop, height, itemHeights, innerHeight) => {
+    ['items', 'scrollTop', 'height', 'itemHeights', 'innerHeight'],
+    (items, scrollTop, height, itemHeights, innerHeight) => {
   let visibleItems = []
   let currentOffset = 0
-  virtualItems.forEach(item => {
-    let height = itemHeights[item.key] || 0
-    console.log(item.key, 'scrollTop', scrollTop, 'currentOffset', currentOffset, 'innerHeight', innerHeight)
+  items.forEach((item, index) => {
+    let { props, key } = item
+    let height = itemHeights[key] || 0
+    console.log(key, 'scrollTop', scrollTop, 'currentOffset', currentOffset, 'innerHeight', innerHeight)
     if (
       ((currentOffset < scrollTop)  && (scrollTop - RENDER_BUFFER < currentOffset)) ||
       ((currentOffset >= scrollTop) && (currentOffset < (scrollTop + innerHeight + RENDER_BUFFER)))
     ) {
-      console.log('    rendering', item)
+      console.log('    rendering', key)
       visibleItems.push({
-        item: item,
-        offset: currentOffset
+        offset: currentOffset,
+        props: props,
+        key: key,
+        index: index
       })
     } else {
-      console.log('not rendering', item)
+      console.log('not rendering', key)
     }
     currentOffset += height
   })
   return visibleItems
 })
 
-virtualListStore.compute('height', ['virtualItems', 'itemHeights'], (virtualItems, itemHeights) => {
+virtualListStore.compute('height', ['items', 'itemHeights'], (items, itemHeights) => {
   let sum = 0
-  virtualItems.forEach(item => {
+  items.forEach(item => {
     sum += itemHeights[item.key] || 0
   })
   return sum