hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'virtual-scrolling-2.0' into shigusegubu-themes3

Browse source
This commit is contained in:
Henry Jameson 2026-09-10 19:10:40 +03:00
commit 55b1162487
8 changed files with 248 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

1
changelog.d/virtual-scrolling-2.change Normal file
View file

@ -0,0 +1 @@
Implemented new virtual scrolling. Opening huge threads should be faster now

58
src/components/conversation/conversation.js
View file

@ -19,6 +19,7 @@ import { useConversation } from 'src/composables/useConversation.js'
import { useScrollPosition } from 'src/composables/useScrollPosition.js'
import { useTreeConversationTopology } from 'src/composables/useTreeConversationTopology.js'
import { useVirtualScrolling } from 'src/composables/useVirtualScrolling.js'
import { useInterfaceSizes } from 'src/composables/useInterfaceSizes.js'
import { WSConnectionStatus } from 'src/api/websocket.js'
@ -83,7 +84,7 @@ export default {
}
setFocused(id)
const target = document.querySelector(`.Status[data-status-id=${id}]`)
return await scroller.scrollIntoView(target, { block: 'start' })
return await scroller.scrollIntoView(target, { block: 'nearest' })
}
const { statusId } = toRefs(props)
@ -132,6 +133,7 @@ export default {
// # Main things
const {
currentStatus,
mainStatus,
conversation,
replies,
getReplies,
@ -148,7 +150,6 @@ export default {
resetDisplayState()
}
if (isPage.value) return
await tryScrollTo(currentStatus.value.id)
},
{ flush: 'post' },
)
@ -187,23 +188,37 @@ export default {
'-last': status.id === lastStatus.value?.id,
})
const { fontSize } = useInterfaceSizes()
// Placeholder heights.
const mutedStatusHeight = computed(() => fontSize.value * 1.5)
const normalStatusHeight = computed(() => fontSize.value * 10)
const getPlaceholderHeight = (id) =>
conversation.value.find((item) => item.id === id)?.muted
? mutedStatusHeight
: normalStatusHeight
// # Linear style stuff
const isLinearView = computed(() => displayStyle.value !== 'tree')
const linearElement = useTemplateRef('linear')
const linearScrollCompensation = computed(
() => isLinearView.value && isExpanded.value,
() => isLinearView.value,
)
const {
heightChart: heightChartLinear,
changeSuspendState: changeSuspendStateLinear,
updateVirtualHeight: updateVirtualHeightLinear,
} = useVirtualScrolling(
conversation,
linearElement,
scroller,
linearScrollCompensation,
currentStatus,
)
pauseWatchers,
resumeWatchers,
} = useVirtualScrolling({
list: conversation,
body: linearElement,
scrollPositionInstance: scroller,
scrollCompensation: linearScrollCompensation,
anchorId: mainStatus.value?.id,
anchorRepeatId: currentStatus.value?.id,
getPlaceholderHeight,
})
// # Tree style stuff
const isTreeView = computed(() => displayStyle.value === 'tree')
@ -218,18 +233,19 @@ export default {
const ancestorsElement = useTemplateRef('ancestors')
const treeScrollCompensation = computed(
() => isTreeView.value && isExpanded.value,
() => isTreeView.value,
)
const {
heightChart: heightChartAncestors,
changeSuspendState: changeSuspendStateAncestors,
updateVirtualHeight: updateVirtualHeightAncestors,
} = useVirtualScrolling(
currentAncestors,
ancestorsElement,
scroller,
treeScrollCompensation,
)
} = useVirtualScrolling({
list: currentAncestors,
body: ancestorsElement,
scrollPositionInstance: scroller,
scrollCompensation: treeScrollCompensation,
getPlaceholderHeight,
})
const currentLevel = computed(() => [currentStatus.value].filter(Boolean))
const currentLevelElement = useTemplateRef('currentLevel')
@ -237,7 +253,13 @@ export default {
heightChart: heightChartCurrentLevel,
changeSuspendState: changeSuspendStateCurrentLevel,
updateVirtualHeight: updateVirtualHeightCurrentLevel,
} = useVirtualScrolling(currentLevel, currentLevelElement, scroller, false)
} = useVirtualScrolling({
list: currentLevel,
body: currentLevelElement,
scrollPositionInstance: scroller,
scrollCompensation: false,
getPlaceholderHeight,
})
const treeViewIsSimple = computed(
() => !mergedConfig.value.conversationTreeAdvanced,

26
src/components/conversation/conversation.vue
View file

@ -97,19 +97,21 @@
:class="{'thread-ancestor-has-other-replies': getReplies(element.id).size > 1, '-faded': shouldFadeAncestors}"
>
<Status
v-if="element.type === 'status'"
v-if="element.type === 'item'"
class="conversation-status panel-body"
:class="getStatusClasses(element.status)"
:class="getStatusClasses(element.item)"
:status-id="element.status.id"
:replies="getReplies(element.status.id)"
:status-id="element.item.id"
:replies="getReplies(element.item.id)"
:focused="focused === element.status.id"
:focused="focused === element.item.id"
conversation-rank="ancestor"
:data-status-id="element.id"
:data-vs-height="element.height"
:data-vs-top="element.top"
@goto="setFocused"
@dive="diveIntoStatus(element.status.id)"
@dive="diveIntoStatus(element.item.id)"
@suspendable-state-change="changeSuspendStateAncestors"
@height-change="updateVirtualHeightAncestors"
/>
@ -128,7 +130,7 @@
<!-- it's more convenient for us to use a v-for here -->
<template v-for="element in heightChartCurrentLevel">
<ThreadTree
v-if="element.type === 'status'"
v-if="element.type === 'item'"
:status-id="currentStatus.id"
:depth="0"
@ -158,13 +160,13 @@
:key="element.id ?? element.ids"
>
<Status
v-if="element.type === 'status'"
v-if="element.type === 'item'"
class="conversation-status"
:class="getStatusClasses(element.status)"
:status-id="element.status.id"
:replies="getReplies(element.status.id)"
:class="getStatusClasses(element.item)"
:status-id="element.item.id"
:replies="getReplies(element.item.id)"
:focused="focused === element.id || focused === element.status.retweeted_status?.id"
:focused="focused === element.id || focused === element.item.retweeted_status?.id"
:data-status-id="element.id"
@goto="setFocused"

2
src/composables/useConversation.js
View file

@ -22,6 +22,7 @@ export function useConversation(statusId, expanded) {
const loadError = ref(null)
const currentStatus = computed(() => getStatusObject(statusId.value))
const mainStatus = computed(() => currentStatus.value?.retweeted_status ?? currentStatus.value)
const sortById = (a, b) => {
const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
@ -115,6 +116,7 @@ export function useConversation(statusId, expanded) {
return {
currentStatus,
mainStatus,
conversation,
replies,
getReplies,

43
src/composables/useInterfaceSizes.js Normal file
View file

@ -0,0 +1,43 @@
import { computed, ref, toValue, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMergedConfigStore } from 'src/stores/merged_config.js'
export function useInterfaceSizes() {
const { mergedConfig } = storeToRefs(useMergedConfigStore())
// Getting the actual font size in pixels since UI might have
// a different scale
const fontSizeSetting = computed(() => mergedConfig.value.textSize)
const fontSize = ref(0)
const updateFontSize = () => {
const string = window
.getComputedStyle(document.body)
.getPropertyValue('font-size')
fontSize.value = Number.parseInt(string.slice(0, -2), 10) // remove the 'px'
}
// Update font size if user changed UI scale
watch(fontSizeSetting, updateFontSize, { immediate: true })
const navbarSize = computed(() => {
const string = fontSize.value * window
.getComputedStyle(document.body)
.getPropertyValue('--navbarSize')
return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
})
const panelHeaderSize = computed(() => {
const string = fontSize.value * window
.getComputedStyle(document.body)
.getPropertyValue('--panelHeaderSize')
return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
})
return {
fontSize,
navbarSize,
panelHeaderSize,
}
}

15
src/composables/useScrollPosition.js
View file

@ -1,5 +1,7 @@
import { onMounted, onUnmounted, ref } from 'vue'
import { useWindowSize } from 'src/composables/useWindowSize.js'
export function useScrollPosition() {
const x = ref(0)
const y = ref(0)
@ -25,7 +27,20 @@ export function useScrollPosition() {
}
const scrollIntoView = async (element, options) => {
if (element == null) throw new TypeError(`Element is ${element}!`)
inProgress.value = true
if (!element.scrollIntoViewIfNeeded) {
const { height: windowHeight } = useWindowSize()
const { top, height } = element.getBoundingClientRect()
const bottom = top + height
const biggerThanScreen = height > windowHeight
const aboveTop = top < 0
const belowBottom = bottom > windowHeight.value
if (aboveTop || belowBottom || biggerThanScreen) {
await element.scrollIntoView(options)
}
}
await element.scrollIntoViewIfNeeded(options)
inProgress.value = false
}

2
src/composables/useTreeConversationTopology.js
View file

@ -26,7 +26,7 @@ export function useTreeConversationTopology(conversation, replies, current) {
if (!result.has(id)) {
result.set(id, new Set())
}
if (irid) {
if (irid && conversation.value.length !== 1) {
// Setting parent for current item
result.get(id).add(irid)
}

251
src/composables/useVirtualScrolling.js
View file

@ -1,23 +1,28 @@
import { storeToRefs } from 'pinia'
import { computed, ref, toValue, watch } from 'vue'
import { useMergedConfigStore } from 'src/stores/merged_config.js'
import { useStatusesStore } from 'src/stores/statuses.js'
import { computed, ref, toValue, watch, nextTick } from 'vue'
import { useWindowSize } from 'src/composables/useWindowSize.js'
export function useVirtualScrolling(
conversation,
export function useVirtualScrolling({
// List of items
list,
// Container of items, used for measuring scroll position
body,
scrollPosition,
// useScrollPosition composable, used to prevent dupicating instances
scrollPositionInstance,
// ID of anchor element, used for scroll compensation.
// Omitting it makes last element the anchor
anchorId,
anchorRepeatId,
// whether to use scroll compensation when elements above anchor change
scrollCompensation,
anchorStatus,
) {
const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
const { mergedConfig } = storeToRefs(useMergedConfigStore())
const anchor = computed(() => anchorStatus?.value.id)
// Placeholder height specification. Must be a function.
// function will be called either:
// - without arguments (for generic placeholder, i.e. buffer zone size)
// - with id (for specific item placeholders)
// function must return ref pointing to height
getPlaceholderHeight,
}) {
// # Suspension
const unsuspendibleIds = ref(new Set())
const changeSuspendState = ({ id, suspend }) => {
if (!suspend) {
@ -27,97 +32,22 @@ export function useVirtualScrolling(
}
}
// Getting the actual font size in pixels since UI might have
// a different scale
const fontSizeSetting = computed(() => mergedConfig.value.textSize)
const fontSize = ref(0)
const updateFontSize = () => {
const string = window
.getComputedStyle(document.body)
.getPropertyValue('font-size')
fontSize.value = Number.parseInt(string.slice(0, -2), 10) // remove the 'px'
}
// Update font size if user changed UI scale
watch(fontSizeSetting, updateFontSize, { immediate: true })
// Placeholder heights.
const mutedStatusHeight = computed(() => {
return fontSize.value * 1.5
})
const normalStatusHeight = computed(() => {
return fontSize.value * 10
})
// Add buffer zone to boundary, equal to approx 3 statuses heights
const buffer = computed(() => normalStatusHeight.value * 3)
// Heights map.
// # Heights mapping.
const heights = ref(new Map())
const totalHeight = computed(() =>
conversation.value.reduce((acc, item) => {
if (heights.value.has(item.id)) {
return acc + heights.value.get(item.id)
} else if (item.muted) {
return acc + mutedStatusHeight.value
} else {
return acc + normalStatusHeight.value
}
}, 0),
)
const updateVirtualHeight = ({ id, height }) => {
heights.value.set(id, height)
}
// Scrolling
const { y: scrollY, inProgress: scrollInProgress, scrollBy } = scrollPosition
const { height: windowHeight } = useWindowSize()
const topScrollBoundary = ref(0)
const bottomScrollBoundary = ref(0)
const updateBoundaries = () => {
if (!body.value) return // Not mounted yet
const { top } = body.value.getBoundingClientRect()
const distanceItemTopToWindowTop = 0 - top
const distanceItemTopToWindowBottom = windowHeight.value - top
topScrollBoundary.value = distanceItemTopToWindowTop
bottomScrollBoundary.value = distanceItemTopToWindowBottom
}
const windowWatcher = watch(windowHeight, updateBoundaries)
const scrollWatcher = watch(scrollY, updateBoundaries)
const heightWatcher = watch(totalHeight, updateBoundaries)
const bodyWatcher = watch(body, updateBoundaries)
const pauseWatchers = () => {
windowWatcher.pause()
scrollWatcher.pause()
heightWatcher.pause()
bodyWatcher.pause()
}
const resumeWatchers = () => {
windowWatcher.resume()
scrollWatcher.resume()
heightWatcher.resume()
bodyWatcher.resume()
}
const heightChart = computed(() => {
// Map every height and suspendable state
const chart = conversation.value.map(({ id }) => {
const status = getStatusObject(id)
const chart = list.value.map((item) => {
const { id } = item
const height =
(() => {
if (heights.value.has(id)) {
return heights.value.get(id)
} else if (status?.muted) {
return mutedStatusHeight.value
} else {
return normalStatusHeight.value
return getPlaceholderHeight(id).value
}
})() + 1 //including border
const suspendable = !unsuspendibleIds.value.has(id)
return { id, height, suspendable, status }
return { id, height, suspendable, item }
})
// Walk over the list to set top offsets
@ -128,38 +58,112 @@ export function useVirtualScrolling(
return chart
})
const updateVirtualHeight = ({ id, height }) => {
heights.value.set(id, height)
}
// ## Scroll compensation
const {
y: scrollY,
inProgress: scrollInProgress,
scrollBy,
} = scrollPositionInstance
watch(heightChart, async (newVal, oldVal) => {
if (!toValue(scrollCompensation)) return
if (scrollInProgress.value) return
if (newVal.length === 0 && oldVal.length === 0) return
pauseWatchers()
// If we're not given an achor, treat last element as one
const getAnchoredEl = (list) =>
anchor.value
? list.find(({ id }) => id === anchor.value)
toValue(anchorId)
? list.find(({ id }) => id === toValue(anchorId) || id === toValue(anchorRepeatId))
: list[list.length - 1]
const oldElement = getAnchoredEl(oldVal)
const newElement = getAnchoredEl(newVal)
const oldOffset = oldElement?.top ?? 0
const newOffset = newElement?.top ?? 0
const diff = newOffset - oldOffset // Positive = down, Negative = up
const diff = (() => {
if (oldElement && newElement) {
// Generic shifting
const oldOffset = toValue(anchorId) ? oldElement.top : (oldElement.top + oldElement.height)
const newOffset = toValue(anchorId) ? newElement.top : (newElement.top + newElement.height)
return newOffset - oldOffset
} else if (!oldElement && newElement) {
// Expansion
return newElement.top + newElement.height
} else if (oldElement && !newElement) {
// Collapsing
return 0 - oldElement.top - oldElement.height
} else {
throw new Error("Somehow both new and old elements are missing, this shouldn't happen")
}
})()
if (diff !== 0) {
// Scroll by amount offset changed to keep it in view
topScrollBoundary.value += diff
bottomScrollBoundary.value += diff
scrollBy(0, diff)
await nextTick()
await scrollBy(0, diff)
}
updateBoundaries()
resumeWatchers()
})
const { height: windowHeight } = useWindowSize()
// Real scroll boundary, relative to body's bounds
const topScrollBoundary = ref(0)
const bottomScrollBoundary = ref(0)
const updateBoundaries = () => {
if (!body.value) return // Not mounted yet
const { top } = body.value.getBoundingClientRect()
const distanceItemTopToWindowTop = 0 - top
const distanceItemTopToWindowBottom = windowHeight.value - top
// Technically, bottom scroll boundary should be distance
// from element's top border to window's bottom border,
// but it just so happens that it is equal to this.
// You can verify it by drawing the boxes and measuring
// distances yourself, I know I did. Geometry, man...
topScrollBoundary.value = distanceItemTopToWindowTop
bottomScrollBoundary.value = distanceItemTopToWindowBottom
}
const windowWatcher = watch(windowHeight, updateBoundaries)
const scrollWatcher = watch(scrollY, updateBoundaries)
const heightWatcher = watch(heightChart, updateBoundaries)
const bodyWatcher = watch(body, updateBoundaries)
const pauseWatchers = () => {
windowWatcher.pause()
scrollWatcher.pause()
heightWatcher.pause()
bodyWatcher.pause()
}
const resumeWatchers = (skipUpdate = false) => {
windowWatcher.resume()
scrollWatcher.resume()
heightWatcher.resume()
bodyWatcher.resume()
if (skipUpdate) return
updateBoundaries()
}
// # Visiblity
// Add buffer zone to boundary, equal to approx 3 items heights
const buffer = computed(() => getPlaceholderHeight().value * 3)
const heightChartGrouped = computed(() => {
// Determine visibility state
const chart = heightChart.value.map((heightChartItem) => {
const itemBottomBoundary = heightChartItem.top + heightChartItem.height
const itemTopBoundary = heightChartItem.top
const itemBottomBoundary = heightChartItem.top + heightChartItem.height
// Include buffer zone
const finalTopScrollBoundary = topScrollBoundary.value - buffer.value
const finalBottomScrollBoundary =
bottomScrollBoundary.value + buffer.value
@ -176,33 +180,39 @@ export function useVirtualScrolling(
}
})
// Group invisible statuses into spacers
// Group invisible items into spacers
return chart.reduce((acc, heightChartItem) => {
const { suspendable, visible, height, top, bottom, id, status } =
const { suspendable, visible, height, top, bottom, id, item } =
heightChartItem
// Bottom value isn't really used otherwise for debugging
const present = visible || !suspendable
if (present) {
return [...acc, { type: 'status', height, top, bottom, id, status }]
return [...acc, { type: 'item', height, top, bottom, id, item }]
} else {
// Reusing previous item if possible
const previousItem = acc[acc.length - 1]
const spacer =
previousItem?.type === 'spacer'
? previousItem
: {
type: 'spacer',
top: Number.POSITIVE_INFINITY,
bottom: Number.POSITIVE_INFINITY,
height: 0,
ids: new Set(),
}
const usingPreviousItem = previousItem?.type === 'spacer'
// We only really care for height and id of spacer, everything else
// is just for debugging
const spacer = usingPreviousItem
? previousItem
: {
type: 'spacer',
top: Number.POSITIVE_INFINITY,
bottom: Number.POSITIVE_INFINITY,
height: 0,
ids: new Set(),
}
spacer.ids.add(id)
spacer.id = [...spacer.ids].join()
spacer.id = [...spacer.ids].join() // used for v-for key attribute
spacer.height += height
if (top < spacer.top) spacer.top = top
if (bottom < spacer.bottom) spacer.bottom = bottom
if (previousItem?.type === 'spacer') {
// If we used previous item there is no need to push it to array
if (usingPreviousItem) {
return acc
} else {
return [...acc, spacer]
@ -215,5 +225,8 @@ export function useVirtualScrolling(
heightChart: heightChartGrouped,
changeSuspendState,
updateVirtualHeight,
pauseWatchers,
resumeWatchers,
updateBoundaries,
}
}