Add virtual scrolling for panel/grid views using TanStack Virtual#1683
Add virtual scrolling for panel/grid views using TanStack Virtual#1683apophisnow wants to merge 5 commits into
Conversation
stvncode
left a comment
stvncode
left a comment
There was a problem hiding this comment.
Love tanstack virtualizer!
On top of that, can you add aria-rowcount/aria-rowindex for screen reader support on the virtualized list pls ?
| const genreOptions = ref<{ label: string; value: number }[]>([]); | ||
|
|
||
| // virtual scroll setup for panel views | ||
| const scrollContainerRef = ref<HTMLElement | null>(null); |
There was a problem hiding this comment.
Could we use this ref as a ref<HTMLElement | null>(null) instead of a document.querySelector('.content-section') ?
| }); | ||
|
|
||
| const panelRowHeight = computed(() => { | ||
| return viewMode.value === "panel_compact" ? 180 : 260; |
There was a problem hiding this comment.
Why use harcoded value here ? Could we not match the actual rendered row heights ? If they don't match, the virtualizer will produce layout jumps as it measures real elements
There was a problem hiding this comment.
Could be nice to use TanStack Virtual's measureElement
|
|
||
| let _unsubscribeMediaEvents: (() => void) | undefined; | ||
| onBeforeUnmount(() => { | ||
| scrollContainerRef.value?.removeEventListener("scroll", checkInfiniteScroll); |
There was a problem hiding this comment.
Can you add { passive: true } to both addEventListener and removeEventListener pls ?It's recommended for scroll listeners to avoid jank
| v-for="item in panelRows[virtualRow.index]" | ||
| :key="item.uri" | ||
| cols="12" | ||
| :class="`col-${panelViewItemResponsive($vuetify.display.width)}`" |
There was a problem hiding this comment.
This is called inside the v-for template via :class binding. Since this is already computed via columnCount, maybe we can use columnCount.value here instead of re-calling the function for every column in every virtual row
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Use template ref + closest() instead of document.querySelector
- Use TanStack Virtual measureElement for dynamic row heights
- Add { passive: true } to scroll event listener
- Use columnCount computed instead of re-calling panelViewItemResponsive
- Add aria-rowcount/aria-rowindex for screen reader support
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
apophisnow
force-pushed
the
perf/panel-virtual-scroll
branch
from
56dc67a to
eea5cca
Compare
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2 participants
No description provided.