elk/components/common/CommonPaginator.vue

<script setup lang="ts">
import type { Ref } from 'vue'
import type { Paginator } from 'masto'

const { paginator, keyProp = 'id' } = defineProps<{
  paginator: Paginator<any, any[]>
  keyProp?: string
}>()

const emit = defineEmits(['items'])

const { items, newItems, state, endAnchor, error } = usePaginator(paginator)

watch(newItems, () => {
  emit('items', newItems.value)
})
</script>

<template>
  <div>
    <slot
      v-for="item of items"
      :key="item[keyProp]"
      :item="item"
    />
    <div ref="endAnchor" />
    <div v-if="state === 'loading'" p5 text-center flex="~ col" items-center animate-pulse>
      <div op50 i-ri:loader-2-fill animate-spin text-2xl />
      <span op50>Loading...</span>
    </div>
    <div v-else-if="state === 'done'" p5 op50 italic text-center>
      End of the list
    </div>
    <div v-else-if="state === 'error'" p5 op50>
      ERROR: {{ error }}
    </div>
  </div>
</template>