diff --git a/components/common/CommonPaginator.vue b/components/common/CommonPaginator.vue index fcb10b9a..1a27d177 100644 --- a/components/common/CommonPaginator.vue +++ b/components/common/CommonPaginator.vue @@ -22,7 +22,9 @@ const { defineSlots<{ default: { + items: T[] item: T + index: number active?: boolean older?: T newer?: T // newer is undefined when index === 0 @@ -61,6 +63,8 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin :active="active" :older="items[index + 1]" :newer="items[index - 1]" + :index="index" + :items="items" /> </DynamicScroller> </template> @@ -71,6 +75,8 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin :item="item" :older="items[index + 1]" :newer="items[index - 1]" + :index="index" + :items="items" /> </template> </slot> diff --git a/components/status/edit/StatusEditHistory.vue b/components/status/edit/StatusEditHistory.vue index 3935cca7..c5d29343 100644 --- a/components/status/edit/StatusEditHistory.vue +++ b/components/status/edit/StatusEditHistory.vue @@ -6,38 +6,43 @@ const { status } = defineProps<{ status: mastodon.v1.Status }>() -const masto = useMasto() -const { data: statusEdits } = useAsyncData(`status:history:${status.id}`, () => masto.v1.statuses.listHistory(status.id).then(res => res.reverse())) +const paginator = useMasto().v1.statuses.listHistory(status.id) const showHistory = (edit: mastodon.v1.StatusEdit) => { openEditHistoryDialog(edit) } const timeAgoOptions = useTimeAgoOptions() + +const reverseHistory = (items: mastodon.v1.StatusEdit[]) => + [...items].reverse() </script> <template> - <template v-if="statusEdits"> - <CommonDropdownItem - v-for="(edit, idx) in statusEdits" - :key="idx" - px="0.5" - @click="showHistory(edit)" - > - {{ getDisplayName(edit.account) }} + <CommonPaginator :paginator="paginator" key-prop="createdAt" :preprocess="reverseHistory"> + <template #default="{ items, item, index }"> + <CommonDropdownItem + px="0.5" + @click="showHistory(item)" + > + {{ getDisplayName(item.account) }} - <template v-if="idx === statusEdits.length - 1"> - <i18n-t keypath="status_history.created"> - {{ formatTimeAgo(new Date(edit.createdAt), timeAgoOptions) }} + <template v-if="index === items.length - 1"> + <i18n-t keypath="status_history.created"> + {{ formatTimeAgo(new Date(item.createdAt), timeAgoOptions) }} + </i18n-t> + </template> + <i18n-t v-else keypath="status_history.edited"> + {{ formatTimeAgo(new Date(item.createdAt), timeAgoOptions) }} </i18n-t> - </template> - <template v-else> - <i18n-t keypath="status_history.edited"> - {{ formatTimeAgo(new Date(edit.createdAt), timeAgoOptions) }} - </i18n-t> - </template> - </CommonDropdownItem> - </template> - <template v-else> - <div i-ri:loader-2-fill animate-spin text-2xl ma /> - </template> + </CommonDropdownItem> + </template> + <template #loading> + <StatusEditHistorySkeleton /> + <StatusEditHistorySkeleton op50 /> + <StatusEditHistorySkeleton op25 /> + </template> + <template #done> + <span /> + </template> + </CommonPaginator> </template> diff --git a/components/status/edit/StatusEditHistorySkeleton.vue b/components/status/edit/StatusEditHistorySkeleton.vue new file mode 100644 index 00000000..96a0bfbb --- /dev/null +++ b/components/status/edit/StatusEditHistorySkeleton.vue @@ -0,0 +1,3 @@ +<template> + <div class="skeleton-loading-bg" h-5 w-full rounded my2 /> +</template>