refactor: use paginator for explore

components/tag/TagCardPaginator.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Paginator, mastodon } from 'masto'
+
+const { paginator } = defineProps<{
+  paginator: Paginator<mastodon.v1.Tag[], mastodon.DefaultPaginationParams>
+}>()
+</script>
+
+<template>
+  <CommonPaginator :paginator="paginator" key-prop="name">
+    <template #default="{ item }">
+      <TagCard :tag="item" border="b base" />
+    </template>
+    <template #loading>
+      <TagCardSkeleton border="b base" />
+      <TagCardSkeleton border="b base" />
+      <TagCardSkeleton border="b base" op50 />
+      <TagCardSkeleton border="b base" op50 />
+      <TagCardSkeleton border="b base" op25 />
+    </template>
+  </CommonPaginator>
+</template>

components/timeline/TimelineList.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import type { mastodon } from 'masto'
-
-defineProps<{
-  timelines: mastodon.v1.Status[]
-}>()
-</script>
-
-<template>
-  <template v-for="status of timelines" :key="status.id">
-    <StatusCard :status="status" border="t base" />
-  </template>
-</template>

pages/[[server]]/explore/tags.vue

@@ -4,10 +4,9 @@ import { STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS } from '~~/constants'
 const { t } = useI18n()
 
 const masto = useMasto()
-const { data, pending, error } = useLazyAsyncData(
+const paginator = masto.v1.trends.listTags({
-  async () => masto.v1.trends.listTags({ limit: 20 }),
+  limit: 20,
-  { immediate: true },
+})
-)
 
 const hideTagsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS, false)
 
@@ -17,28 +16,9 @@ useHeadFixed({
 </script>
 
 <template>
-  <CommonAlert v-if="isHydrated && !hideTagsTips && data && data.length" @close="hideTagsTips = true">
+  <CommonAlert v-if="!hideTagsTips" @close="hideTagsTips = true">
     <p>{{ $t('tooltip.explore_tags_intro') }}</p>
   </CommonAlert>
 
-  <div v-if="data && data.length">
+  <TagCardPaginator v-bind="{ paginator }" />
-    <TagCard v-for="item of data" :key="item.name" :tag="item" border="b base" />
-
-    <div p5 text-center text-secondary-light italic>
-      {{ $t('common.end_of_list') }}
-    </div>
-  </div>
-  <div v-else-if="pending">
-    <TagCardSkeleton border="b base" />
-    <TagCardSkeleton border="b base" />
-    <TagCardSkeleton border="b base" op50 />
-    <TagCardSkeleton border="b base" op50 />
-    <TagCardSkeleton border="b base" op25 />
-  </div>
-  <div v-else-if="error" p5 text-center text-red italic>
-    {{ $t('common.error') }}: {{ error }}
-  </div>
-  <div v-else p5 text-center text-secondary italic>
-    {{ $t('error.explore-list-empty') }}
-  </div>
 </template>

pages/[[server]]/explore/users.vue

@@ -2,11 +2,7 @@
 const { t } = useI18n()
 
 // limit: 20 is the default configuration of the official client
-const masto = useMasto()
+const paginator = useMasto().v2.suggestions.list({ limit: 20 })
-const { data, pending, error } = useLazyAsyncData(
-  async () => masto.v2.suggestions.list({ limit: 20 }),
-  { immediate: true },
-)
 
 useHeadFixed({
   title: () => `${t('tab.for_you')} | ${t('nav.explore')}`,
@@ -14,29 +10,19 @@ useHeadFixed({
 </script>
 
 <template>
-  <div v-if="data && data.length">
+  <CommonPaginator :paginator="paginator" key-prop="account">
-    <AccountBigCard
+    <template #default="{ item }">
-      v-for="suggestion of data"
+      <AccountBigCard
-      :key="suggestion.account.id"
+        :account="item.account"
-      :account="suggestion.account"
+        as="router-link"
-      as="router-link"
+        :to="getAccountRoute(item.account)"
-      :to="getAccountRoute(suggestion.account)"
+        border="b base"
-      border="b base"
+      />
-    />
+    </template>
-
+    <template #loading>
-    <div p5 text-center text-secondary-light italic>
+      <AccountBigCardSkeleton border="b base" />
-      {{ $t('common.end_of_list') }}
+      <AccountBigCardSkeleton border="b base" op50 />
-    </div>
+      <AccountBigCardSkeleton border="b base" op25 />
-  </div>
+    </template>
-  <div v-else-if="pending">
+  </CommonPaginator>
-    <AccountBigCardSkeleton border="b base" />
-    <AccountBigCardSkeleton border="b base" op50 />
-    <AccountBigCardSkeleton border="b base" op25 />
-  </div>
-  <div v-else-if="error" p5 text-center text-red italic>
-    {{ $t('common.error') }}: {{ error }}
-  </div>
-  <div v-else p5 text-center text-secondary italic>
-    {{ $t('common.not_found') }}
-  </div>
 </template>