pinafore/routes/_components/pseudoVirtualList/PseudoVirtualListItem.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>