break up status rendering with rAF a bit

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: {

routes/_components/virtualList/VirtualListContainer.html

@@ -74,12 +74,12 @@
         detachFullscreenListener(this.onFullscreenChange)
       },
       onScroll(event) {
-        mark('onScroll')
+        let { scrollTop, scrollHeight } = event.target
-        this.store.setForRealm({
+        requestAnimationFrame(() => { // delay slightly to improve scroll perf
-          scrollTop: event.target.scrollTop,
+          mark('onScroll -> setForRealm()')
-          scrollHeight: event.target.scrollHeight
+          this.store.setForRealm({scrollTop, scrollHeight})
+          stop('onScroll -> setForRealm()')
         })
-        stop('onScroll')
       },
       onFullscreenChange() {
         mark('onFullscreenChange')

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: {