pinafore/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html

{{#if props}}
  <PseudoVirtualListItem :component
                         :props
                         :key
                         :index
                         :length
                         :intersectionObserver
                         :isIntersecting
                         :isCached
                         :height
                         on:scrollToPosition
  />
{{/if}}
<script>
  import PseudoVirtualListItem from './PseudoVirtualListItem.html'
  import { mark, stop } from '../../_utils/marks'

  export default {
    async oncreate() {
      // TODO: there appears to be a bug in {{#await}} that means we have to do this manually.
      // Some items may appear on top of other items because their offset is 0 and never updated.
      let makeProps = this.get('makeProps')
      let key = this.get('key')
      if (makeProps) {
        let props = await makeProps(key)
        requestAnimationFrame(() => { // delay slightly to avoid slow scrolling
          mark('PseudoVirtualListLazyItem set props')
          this.set({props: props})
          stop('PseudoVirtualListLazyItem set props')
        })
      }
    },
    components: {
      PseudoVirtualListItem
    }
  }
</script>