From c11f2454ad4b3ada82d99c948d08452da62bc941 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 14 Mar 2018 18:24:16 -0700
Subject: [PATCH] break up status rendering with rAF a bit

---
 .../pseudoVirtualList/PseudoVirtualListLazyItem.html  | 11 +++++++++--
 .../_components/virtualList/VirtualListContainer.html | 10 +++++-----
 .../_components/virtualList/VirtualListLazyItem.html  | 11 +++++++++--
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html b/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html
index a11db7d..216beac 100644
--- a/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html
+++ b/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html
@@ -13,14 +13,21 @@
 {{/if}}
 <script>
   import PseudoVirtualListItem from './PseudoVirtualListItem.html'
+  import { mark, stop } from '../../_utils/marks'
+
   export default {
-    oncreate() {
+    async oncreate() {
       // TODO: there appears to be a bug in {{#await}} that means we have to do this manually.
       // Some items may appear on top of other items because their offset is 0 and never updated.
       let makeProps = this.get('makeProps')
       let key = this.get('key')
       if (makeProps) {
-        makeProps(key).then(props => this.set({props: props}))
+        let props = await makeProps(key)
+        requestAnimationFrame(() => { // delay slightly to avoid slow scrolling
+          mark('PseudoVirtualListLazyItem set props')
+          this.set({props: props})
+          stop('PseudoVirtualListLazyItem set props')
+        })
       }
     },
     components: {
diff --git a/routes/_components/virtualList/VirtualListContainer.html b/routes/_components/virtualList/VirtualListContainer.html
index d78cf74..a10e95c 100644
--- a/routes/_components/virtualList/VirtualListContainer.html
+++ b/routes/_components/virtualList/VirtualListContainer.html
@@ -74,12 +74,12 @@
         detachFullscreenListener(this.onFullscreenChange)
       },
       onScroll(event) {
-        mark('onScroll')
-        this.store.setForRealm({
-          scrollTop: event.target.scrollTop,
-          scrollHeight: event.target.scrollHeight
+        let { scrollTop, scrollHeight } = event.target
+        requestAnimationFrame(() => { // delay slightly to improve scroll perf
+          mark('onScroll -> setForRealm()')
+          this.store.setForRealm({scrollTop, scrollHeight})
+          stop('onScroll -> setForRealm()')
         })
-        stop('onScroll')
       },
       onFullscreenChange() {
         mark('onFullscreenChange')
diff --git a/routes/_components/virtualList/VirtualListLazyItem.html b/routes/_components/virtualList/VirtualListLazyItem.html
index f3bc0c8..873db8b 100644
--- a/routes/_components/virtualList/VirtualListLazyItem.html
+++ b/routes/_components/virtualList/VirtualListLazyItem.html
@@ -8,14 +8,21 @@
 {{/if}}
 <script>
   import VirtualListItem from './VirtualListItem'
+  import { mark, stop } from '../../_utils/marks'
+
   export default {
-    oncreate() {
+    async oncreate() {
       // TODO: there appears to be a bug in {{#await}} that means we have to do this manually.
       // Some items may appear on top of other items because their offset is 0 and never updated.
       let makeProps = this.get('makeProps')
       let key = this.get('key')
       if (makeProps) {
-        makeProps(key).then(props => this.set({props: props}))
+        let props = await makeProps(key)
+        requestAnimationFrame(() => { // delay slightly to avoid slow scrolling
+          mark('VirtualListLazyItem set props')
+          this.set({props: props})
+          stop('VirtualListLazyItem set props')
+        })
       }
     },
     components: {