forked from cybrespace/pinafore
50 lines
1.4 KiB
HTML
50 lines
1.4 KiB
HTML
<div class="pseudo-virtual-list-item"
|
|
aria-hidden="{{hide}}"
|
|
pseudo-virtual-list-key="{{key}}"
|
|
style="height: {{shouldHide ? `${height}px` : ''}};"
|
|
ref:node>
|
|
{{#if !shouldHide}}
|
|
<:Component {component}
|
|
virtualProps="{{props}}"
|
|
virtualIndex="{{index}}"
|
|
virtualLength="{{length}}"
|
|
/>
|
|
{{/if}}
|
|
</div>
|
|
<script>
|
|
|
|
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
|
|
import { mark, stop } from '../../_utils/marks'
|
|
|
|
export default {
|
|
oncreate() {
|
|
this.observe('isIntersecting', isIntersecting => {
|
|
if (isIntersecting) {
|
|
mark('render')
|
|
this.set({hide: false})
|
|
stop('render')
|
|
} else {
|
|
// unrender lazily; it's not a critical UI task
|
|
scheduleIdleTask(() => {
|
|
mark('unrender')
|
|
if (!this.get('isIntersecting')) {
|
|
this.set({hide: true})
|
|
}
|
|
stop('unrender')
|
|
})
|
|
}
|
|
})
|
|
|
|
let intersectionObserver = this.get('intersectionObserver')
|
|
intersectionObserver.observe(this.refs.node)
|
|
},
|
|
computed: {
|
|
shouldHide: (isIntersecting, isCached, hide) => {
|
|
if (isCached) {
|
|
return true // if it's cached, always unrender immediately until proven it's intersecting
|
|
}
|
|
return !isIntersecting && hide
|
|
}
|
|
}
|
|
}
|
|
</script>
|