feat: use experimentalVirtualScroller on notifications (#940)

This commit is contained in:
Joaquín Sánchez 2023-01-11 10:59:47 +01:00 committed by GitHub
parent 46109d6dfa
commit 0cc75a10b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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"