play with raf rendering

This commit is contained in:
Nolan Lawson 2018-03-14 18:24:16 -07:00
parent a2744cddb0
commit fb5712841a
3 changed files with 41 additions and 4 deletions

View File

@ -13,14 +13,22 @@
{{/if}} {{/if}}
<script> <script>
import PseudoVirtualListItem from './PseudoVirtualListItem.html' import PseudoVirtualListItem from './PseudoVirtualListItem.html'
import { mark, stop } from '../../_utils/marks'
import { staggeredRequestAnimationFrame } from '../../_utils/staggeredRequestAnimationFrame'
export default { export default {
oncreate() { async oncreate() {
// TODO: there appears to be a bug in {{#await}} that means we have to do this manually. // 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. // Some items may appear on top of other items because their offset is 0 and never updated.
let makeProps = this.get('makeProps') let makeProps = this.get('makeProps')
let key = this.get('key') let key = this.get('key')
if (makeProps) { 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: { components: {

View File

@ -8,14 +8,22 @@
{{/if}} {{/if}}
<script> <script>
import VirtualListItem from './VirtualListItem' import VirtualListItem from './VirtualListItem'
import { mark, stop } from '../../_utils/marks'
import { staggeredRequestAnimationFrame } from '../../_utils/staggeredRequestAnimationFrame'
export default { export default {
oncreate() { async oncreate() {
// TODO: there appears to be a bug in {{#await}} that means we have to do this manually. // 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. // Some items may appear on top of other items because their offset is 0 and never updated.
let makeProps = this.get('makeProps') let makeProps = this.get('makeProps')
let key = this.get('key') let key = this.get('key')
if (makeProps) { 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: { components: {

View File

@ -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)
}
}