experiment with high and low render priority

routes/_components/timeline/NotificationVirtualListItem.html

@@ -5,6 +5,7 @@
   focusSelector="{{virtualProps.focusSelector}}"
   index="{{virtualIndex}}"
   length="{{virtualLength}}"
+  lowPriority="{{virtualLowPriority}}"
   on:recalculateHeight />
 <script>
   import Notification from '../status/Notification.html'

routes/_components/virtualList/VirtualList.html

@@ -8,6 +8,7 @@
                              makeProps="{{makeProps}}"
                              key="{{visibleItem.key}}"
                              index="{{visibleItem.index}}"
+                             lowPriority="{{visibleItem.lowPriority}}"
         />
       {{/each}}
     {{/if}}

routes/_components/virtualList/VirtualListLazyItem.html

@@ -19,11 +19,18 @@
       let key = this.get('key')
       if (makeProps) {
         let props = await makeProps(key)
-        scheduleIdleTask(() => { // delay slightly to avoid slow scrolling
+        let render = () => {
           mark('VirtualListLazyItem set props')
           this.set({props: props})
           stop('VirtualListLazyItem set props')
-        })
+        }
+        if (this.get('lowPriority')) {
+          console.log('lazy render', this.get('key'))
+          scheduleIdleTask(render)
+        } else {
+          console.log('fast render', this.get('key'))
+          render()
+        }
       }
     },
     components: {

routes/_components/virtualList/virtualListStore.js

@@ -4,6 +4,11 @@ import { reselect } from '../../_utils/reselect'
 
 const VIEWPORT_RENDER_FACTOR = 5
 
+// TODO: Hack because compose box takes up roughly this amount of pixels.
+// Ideally we should calculate that the .virtual-list is X number of pixels
+// below the .container and then offset everything by that.
+const HIGH_PRIORITY_TOP_BUFFER = 600
+
 class VirtualListStore extends RealmStore {
   constructor (state) {
     super(state, /* maxSize */ 10)
@@ -46,14 +51,17 @@ virtualListStore.compute('rawVisibleItems',
             continue // above the area we want to render
           }
         } else {
-          if (currentOffset > (scrollTop + height + renderBuffer)) {
+          if (currentOffset > (scrollTop + offsetHeight + renderBuffer)) {
             break // below the area we want to render
           }
         }
+        let lowPriority = ((currentOffset + height + HIGH_PRIORITY_TOP_BUFFER) < scrollTop) ||
+          (currentOffset > (scrollTop + offsetHeight))
         visibleItems.push({
           offset: currentOffset,
           key: key,
-          index: i
+          index: i,
+          lowPriority: lowPriority
         })
       }
       stop('compute visibleItems')