58 lines
1.6 KiB
HTML
58 lines
1.6 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'
|
|
import { observe } from 'svelte-extras'
|
|
|
|
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)
|
|
},
|
|
data: () => ({
|
|
hide: false
|
|
}),
|
|
computed: {
|
|
shouldHide: (isIntersecting, isCached, hide) => {
|
|
if (isCached) {
|
|
return true // if it's cached, always unrender immediately until proven it's intersecting
|
|
}
|
|
return !isIntersecting && hide
|
|
}
|
|
},
|
|
methods: {
|
|
observe
|
|
}
|
|
}
|
|
</script>
|