pinafore/src/routes/_components/virtualList/VirtualListLazyItem.html

{#if props}
  <VirtualListItem {component}
                   {offset}
                   {props}
                   {key}
                   {index}
  />
{/if}
<script>
  import VirtualListItem from './VirtualListItem'
  import { mark, stop } from '../../_utils/marks'
  import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
  import { createPriorityQueue } from '../../_utils/createPriorityQueue'
  import { isMobile } from '../../_utils/userAgent/isMobile'

  // In Svelte's implementation of lists, these VirtualListLazyItems can be
  // created in any order. By default in fact it seems to do it in reverse
  // order, which we don't really want, because then items render in a janky
  // way, with the last ones first and then replaced by the first ones,
  // resulting in a UI that looks like a deck of cards being shuffled.
  // This functions waits a microtask and then ensures that the callbacks
  // are called by index, in ascending order.
  const priorityQueue = createPriorityQueue()

  export default {
    async oncreate () {
      const { makeProps, key, index } = this.get()
      if (makeProps) {
        await priorityQueue(index)
        const props = await makeProps(key)
        const setProps = () => {
          mark('VirtualListLazyItem set props')
          this.set({ props: props })
          stop('VirtualListLazyItem set props')
        }
        // On mobile, render in rIC for maximum input responsiveness. The reason we do
        // different behavior for desktop versus mobile is:
        // 1. On desktop, the scrollbar is really distracting as it changes size. It may
        //    even cause issues for people with vestibular disorders (see also prefers-reduced-motion).
        // 2. On mobile, the CPU is generally slower, so we want better input responsiveness.
        // TODO: someday we can use isInputPending as a better way to break up work
        // https://www.chromestatus.com/feature/5719830432841728
        if (isMobile()) {
          scheduleIdleTask(setProps)
        } else {
          setProps()
        }
      }
    },
    data: () => ({
      props: undefined
    }),
    components: {
      VirtualListItem
    }
  }
</script>