mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 12:19:08 +01:00
feat: use experimentalVirtualScroller
on notifications (#940)
This commit is contained in:
parent
46109d6dfa
commit
0cc75a10b5
1 changed files with 34 additions and 3 deletions
|
@ -1,4 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
// @ts-expect-error missing types
|
||||||
|
import { DynamicScrollerItem } from 'vue-virtual-scroller'
|
||||||
import type { Paginator, WsEvents, mastodon } from 'masto'
|
import type { Paginator, WsEvents, mastodon } from 'masto'
|
||||||
import type { GroupedAccountLike, NotificationSlot } from '~/types'
|
import type { GroupedAccountLike, NotificationSlot } from '~/types'
|
||||||
|
|
||||||
|
@ -7,6 +9,8 @@ const { paginator, stream } = defineProps<{
|
||||||
stream?: Promise<WsEvents>
|
stream?: Promise<WsEvents>
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const virtualScroller = $(useFeatureFlag('experimentalVirtualScroller'))
|
||||||
|
|
||||||
const groupCapacity = Number.MAX_VALUE // No limit
|
const groupCapacity = Number.MAX_VALUE // No limit
|
||||||
|
|
||||||
// Group by type (and status when applicable)
|
// Group by type (and status when applicable)
|
||||||
|
@ -135,14 +139,41 @@ const { formatNumber } = useHumanReadableNumber()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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 }">
|
<template #updater="{ number, update }">
|
||||||
<button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
|
<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) } }) }}
|
{{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
<template #items="{ items }">
|
<template #default="{ item, active }">
|
||||||
<template v-for="item of items" :key="item.id">
|
<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
|
<NotificationGroupedFollow
|
||||||
v-if="item.type === 'grouped-follow'"
|
v-if="item.type === 'grouped-follow'"
|
||||||
:items="item"
|
:items="item"
|
||||||
|
|
Loading…
Reference in a new issue