elk/composables/paginator.ts

42 lines
950 B
TypeScript
Raw Normal View History

import type { Paginator } from 'masto'
2022-11-16 17:11:08 +01:00
import type { PaginatorState } from '~/types'
export function usePaginator<T>(paginator: Paginator<any, T[]>) {
2022-11-16 17:11:08 +01:00
let state = $ref('ready' as PaginatorState)
const items = $ref<T[]>([])
const endAnchor = ref<HTMLDivElement>()
const bound = reactive(useElementBounding(endAnchor))
const isInScreen = $computed(() => bound.top < window.innerHeight * 2)
async function loadNext() {
2022-11-16 17:11:08 +01:00
if (state === 'loading' || state === 'done')
return
2022-11-16 17:11:08 +01:00
state = 'loading'
const result = await paginator.next()
2022-11-16 17:11:08 +01:00
state = result.done ? 'done' : 'ready'
if (result.value?.length)
items.push(...result.value)
2022-11-16 17:11:08 +01:00
await nextTick()
bound.update()
}
useIntervalFn(() => {
bound.update()
}, 1000)
watch(
() => isInScreen,
() => {
2022-11-16 17:11:08 +01:00
if (isInScreen && state !== 'loading')
loadNext()
},
{ immediate: true },
)
2022-11-16 17:11:08 +01:00
return { items, state, endAnchor }
}