<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') let { isIntersecting } = this.get() || {} // https://github.com/sveltejs/svelte/issues/1354 if (!isIntersecting) { this.set({hide: true}) } stop('unrender') }) } }) let { intersectionObserver } = this.get() 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>