break up status rendering with rAF a bit

This commit is contained in:
Nolan Lawson 2018-03-14 18:24:16 -07:00
parent 1477fbfbda
commit c11f2454ad
3 changed files with 23 additions and 9 deletions

View file

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

View file

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

View file

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