play with raf rendering

routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html

@@ -13,14 +13,22 @@
 {{/if}}
 <script>
   import PseudoVirtualListItem from './PseudoVirtualListItem.html'
+  import { mark, stop } from '../../_utils/marks'
+  import { staggeredRequestAnimationFrame } from '../../_utils/staggeredRequestAnimationFrame'
+
   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)
+        staggeredRequestAnimationFrame(() => {
+          mark('PseudoVirtualListLazyItem set props')
+          this.set({props: props})
+          stop('PseudoVirtualListLazyItem set props')
+        })
       }
     },
     components: {

routes/_components/virtualList/VirtualListLazyItem.html

@@ -8,14 +8,22 @@
 {{/if}}
 <script>
   import VirtualListItem from './VirtualListItem'
+  import { mark, stop } from '../../_utils/marks'
+  import { staggeredRequestAnimationFrame } from '../../_utils/staggeredRequestAnimationFrame'
+
   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)
+        staggeredRequestAnimationFrame(() => {
+          mark('VirtualListLazyItem set props')
+          this.set({props: props})
+          stop('VirtualListLazyItem set props')
+        })
       }
     },
     components: {

routes/_utils/staggeredRequestAnimationFrame.js

@@ -0,0 +1,21 @@
+import TinyQueue from 'tiny-queue'
+let queue = new TinyQueue()
+
+let running = false
+
+function run() {
+  if (queue.length) {
+    queue.shift()()
+    requestAnimationFrame(run)
+  } else {
+    running = false
+  }
+}
+
+export function staggeredRequestAnimationFrame(fn) {
+  queue.push(fn)
+  if (!running) {
+    running = true
+    requestAnimationFrame(run)
+  }
+}