feat: common paginator component (#9)

composables/paginator.ts

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