From fb5712841a98f5a66450293db5cffd9ff0cffd84 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 14 Mar 2018 18:24:16 -0700
Subject: [PATCH] play with raf rendering

---
 .../PseudoVirtualListLazyItem.html            | 12 +++++++++--
 .../virtualList/VirtualListLazyItem.html      | 12 +++++++++--
 .../_utils/staggeredRequestAnimationFrame.js  | 21 +++++++++++++++++++
 3 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 routes/_utils/staggeredRequestAnimationFrame.js

diff --git a/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html b/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html
index a11db7d9..ba3ef1ef 100644
--- a/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html
+++ b/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: {
diff --git a/routes/_components/virtualList/VirtualListLazyItem.html b/routes/_components/virtualList/VirtualListLazyItem.html
index f3bc0c86..f284b53a 100644
--- a/routes/_components/virtualList/VirtualListLazyItem.html
+++ b/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: {
diff --git a/routes/_utils/staggeredRequestAnimationFrame.js b/routes/_utils/staggeredRequestAnimationFrame.js
new file mode 100644
index 00000000..dbad9d43
--- /dev/null
+++ b/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)
+  }
+}
\ No newline at end of file