zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: use `experimentalVirtualScroller` on notifications (#940)

zio/stable
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
1 changed files with 34 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/notification/NotificationPaginator.vue
View File

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