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'
  import { store } from '../../_store/store'

  // 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()
      const { reduceMotion } = this.store.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 desktop, if prefers-reduced-motion is enabled, avoid using scheduleIdleTask
        // here because it causes the scrollbar to grow in a way that may sicken
        // people with vestibular disorders.
        // TODO: someday we can use isInputPending as a better way to break up work
        // https://www.chromestatus.com/feature/5719830432841728
        if (!isMobile() && reduceMotion) {
          setProps()
        } else {
          scheduleIdleTask(setProps)
        }
      }
    },
    data: () => ({
      props: undefined
    }),
    store: () => store,
    components: {
      VirtualListItem
    }
  }
</script>