kopia lustrzana https://github.com/nolanlawson/pinafore
62 wiersze
2.3 KiB
HTML
62 wiersze
2.3 KiB
HTML
{#if props}
|
|
<VirtualListItem {component}
|
|
{offset}
|
|
{props}
|
|
{key}
|
|
{index}
|
|
/>
|
|
{/if}
|
|
<script>
|
|
import VirtualListItem from './VirtualListItem.html'
|
|
import { mark, stop } from '../../_utils/marks.js'
|
|
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask.js'
|
|
import { createPriorityQueue } from '../../_utils/createPriorityQueue.js'
|
|
import { isMobile } from '../../_utils/userAgent/isMobile.js'
|
|
import { store } from '../../_store/store.js'
|
|
|
|
// 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 {
|
|
oncreate () {
|
|
const { makeProps, key, index } = this.get()
|
|
const { reduceMotion } = this.store.get()
|
|
if (makeProps) {
|
|
// TODO: I would use async/await here, but Firefox 68 for Android has a bug where
|
|
// these don't resolve in the proper order unless I use promises
|
|
priorityQueue(index).then(async () => {
|
|
const props = await makeProps(key)
|
|
const setProps = () => {
|
|
mark('VirtualListLazyItem set props')
|
|
this.set({ 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>
|