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}
    <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>