feat: use experimentalVirtualScroller
on notifications (#940)
This commit is contained in:
parent
46109d6dfa
commit
0cc75a10b5
|
@ -1,4 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
// @ts-expect-error missing types
|
||||
import { DynamicScrollerItem } from 'vue-virtual-scroller'
|
||||
import type { Paginator, WsEvents, mastodon } from 'masto'
|
||||
import type { GroupedAccountLike, NotificationSlot } from '~/types'
|
||||
|
||||
|
@ -7,6 +9,8 @@ const { paginator, stream } = defineProps<{
|
|||
stream?: Promise<WsEvents>
|
||||
}>()
|
||||
|
||||
const virtualScroller = $(useFeatureFlag('experimentalVirtualScroller'))
|
||||
|
||||
const groupCapacity = Number.MAX_VALUE // No limit
|
||||
|
||||
// Group by type (and status when applicable)
|
||||
|
@ -135,14 +139,41 @@ const { formatNumber } = useHumanReadableNumber()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<CommonPaginator :paginator="paginator" :preprocess="preprocess" :stream="stream" :eager="3" event-type="notification">
|
||||
<CommonPaginator
|
||||
:paginator="paginator"
|
||||
:preprocess="preprocess"
|
||||
:stream="stream"
|
||||
:eager="3"
|
||||
:virtual-scroller="virtualScroller"
|
||||
event-type="notification"
|
||||
>
|
||||
<template #updater="{ number, update }">
|
||||
<button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
|
||||
{{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
|
||||
</button>
|
||||
</template>
|
||||
<template #items="{ items }">
|
||||
<template v-for="item of items" :key="item.id">
|
||||
<template #default="{ item, active }">
|
||||
<template v-if="virtualScroller">
|
||||
<DynamicScrollerItem :item="item" :active="active" tag="div">
|
||||
<NotificationGroupedFollow
|
||||
v-if="item.type === 'grouped-follow'"
|
||||
:items="item"
|
||||
border="b base"
|
||||
/>
|
||||
<NotificationGroupedLikes
|
||||
v-else-if="item.type === 'grouped-reblogs-and-favourites'"
|
||||
:group="item"
|
||||
border="b base"
|
||||
/>
|
||||
<NotificationCard
|
||||
v-else
|
||||
:notification="item"
|
||||
hover:bg-active
|
||||
border="b base"
|
||||
/>
|
||||
</DynamicScrollerItem>
|
||||
</template>
|
||||
<template v-else>
|
||||
<NotificationGroupedFollow
|
||||
v-if="item.type === 'grouped-follow'"
|
||||
:items="item"
|
||||
|
|
Loading…
Reference in a new issue