diff --git a/components/tag/TagCardPaginator.vue b/components/tag/TagCardPaginator.vue new file mode 100644 index 00000000..498ff92a --- /dev/null +++ b/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> diff --git a/components/timeline/TimelineList.vue b/components/timeline/TimelineList.vue deleted file mode 100644 index 36b36473..00000000 --- a/components/timeline/TimelineList.vue +++ /dev/null @@ -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> diff --git a/pages/[[server]]/explore/tags.vue b/pages/[[server]]/explore/tags.vue index e687e3be..f69447f5 100644 --- a/pages/[[server]]/explore/tags.vue +++ b/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( - async () => masto.v1.trends.listTags({ limit: 20 }), - { immediate: true }, -) +const paginator = masto.v1.trends.listTags({ + limit: 20, +}) 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"> - <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> + <TagCardPaginator v-bind="{ paginator }" /> </template> diff --git a/pages/[[server]]/explore/users.vue b/pages/[[server]]/explore/users.vue index 8d0ed9c6..218d5964 100644 --- a/pages/[[server]]/explore/users.vue +++ b/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 { data, pending, error } = useLazyAsyncData( - async () => masto.v2.suggestions.list({ limit: 20 }), - { immediate: true }, -) +const paginator = useMasto().v2.suggestions.list({ limit: 20 }) useHeadFixed({ title: () => `${t('tab.for_you')} | ${t('nav.explore')}`, @@ -14,29 +10,19 @@ useHeadFixed({ </script> <template> - <div v-if="data && data.length"> - <AccountBigCard - v-for="suggestion of data" - :key="suggestion.account.id" - :account="suggestion.account" - as="router-link" - :to="getAccountRoute(suggestion.account)" - border="b base" - /> - - <div p5 text-center text-secondary-light italic> - {{ $t('common.end_of_list') }} - </div> - </div> - <div v-else-if="pending"> - <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> + <CommonPaginator :paginator="paginator" key-prop="account"> + <template #default="{ item }"> + <AccountBigCard + :account="item.account" + as="router-link" + :to="getAccountRoute(item.account)" + border="b base" + /> + </template> + <template #loading> + <AccountBigCardSkeleton border="b base" /> + <AccountBigCardSkeleton border="b base" op50 /> + <AccountBigCardSkeleton border="b base" op25 /> + </template> + </CommonPaginator> </template>