refactor(status): rework edit history list

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>

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>

components/status/edit/StatusEditHistorySkeleton.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="skeleton-loading-bg" h-5 w-full rounded my2 />
+</template>