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'

  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')
            if (!this.get('isIntersecting')) {
              this.set({hide: true})
            }
            stop('unrender')
          })
        }
      })

      let intersectionObserver = this.get('intersectionObserver')
      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>