From 5a80d437845dc2bf39e7155581027072a523a6e1 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 21 Mar 2018 23:32:08 -0700
Subject: [PATCH] experiment with high and low render priority

---
 .../timeline/NotificationVirtualListItem.html        |  1 +
 routes/_components/virtualList/VirtualList.html      |  1 +
 .../_components/virtualList/VirtualListLazyItem.html | 11 +++++++++--
 routes/_components/virtualList/virtualListStore.js   | 12 ++++++++++--
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/routes/_components/timeline/NotificationVirtualListItem.html b/routes/_components/timeline/NotificationVirtualListItem.html
index 04bd5b8b..08926c1e 100644
--- a/routes/_components/timeline/NotificationVirtualListItem.html
+++ b/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'
diff --git a/routes/_components/virtualList/VirtualList.html b/routes/_components/virtualList/VirtualList.html
index 1061b761..2e85aa1e 100644
--- a/routes/_components/virtualList/VirtualList.html
+++ b/routes/_components/virtualList/VirtualList.html
@@ -8,6 +8,7 @@
                              makeProps="{{makeProps}}"
                              key="{{visibleItem.key}}"
                              index="{{visibleItem.index}}"
+                             lowPriority="{{visibleItem.lowPriority}}"
         />
       {{/each}}
     {{/if}}
diff --git a/routes/_components/virtualList/VirtualListLazyItem.html b/routes/_components/virtualList/VirtualListLazyItem.html
index 828796a1..e317fea5 100644
--- a/routes/_components/virtualList/VirtualListLazyItem.html
+++ b/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: {
diff --git a/routes/_components/virtualList/virtualListStore.js b/routes/_components/virtualList/virtualListStore.js
index cc44dd2d..1fcbf4af 100644
--- a/routes/_components/virtualList/virtualListStore.js
+++ b/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')