forked from cybrespace/pinafore
58 lines
1.5 KiB
HTML
58 lines
1.5 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}
|
|
<svelte:component this={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()
|
|
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>
|