mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-05 05:32:02 +00:00
fix: virtualize cloud job queue history list (#10592)
## Summary Virtualize the shared job queue history list so opening the jobs panel does not eagerly mount the full history on cloud. ## Changes - **What**: Virtualize the shared queue history list used by the overlay and sidebar, flatten date headers plus job rows into a single virtual stream, and preserve hover/menu behavior with updated queue list tests. - **Why `@tanstack/vue-virtual` instead of Reka virtualizers**: the installed `reka-ui@2.5.0` does not expose a generic list virtualizer. It only exposes `ListboxVirtualizer`, `ComboboxVirtualizer`, and `TreeVirtualizer`, and those components inject `ListboxRoot`/`TreeRoot` context and carry listbox or tree selection/keyboard semantics. The job history UI is a flat grouped action list, not a selectable listbox or navigable tree, so this uses the same TanStack virtualizer layer directly without forcing the wrong semantics onto the component. ## Review Focus Please verify the virtual row sizing and inter-group spacing behavior across date headers and the last row in each group. > [!TIP] > Diff reads much cleaner through vscode's unified view with show leading/trailing whitespace differences enabled Linear: COM-304 https://tanstack.com/virtual/latest/docs/api/virtualizer ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10592-fix-virtualize-cloud-job-queue-history-list-3306d73d3650819d956bf4b2d8b59a40) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
import { vi } from 'vitest'
|
||||
|
||||
vi.mock('@tanstack/vue-virtual', async () => {
|
||||
const { computed } = await import('vue')
|
||||
|
||||
return {
|
||||
useVirtualizer: (options: {
|
||||
count: number
|
||||
estimateSize: (index: number) => number
|
||||
getItemKey?: (index: number) => number | string
|
||||
}) =>
|
||||
computed(() => {
|
||||
let start = 0
|
||||
const items = Array.from({ length: options.count }, (_, index) => {
|
||||
const size = options.estimateSize(index)
|
||||
const item = {
|
||||
key: options.getItemKey?.(index) ?? index,
|
||||
index,
|
||||
start,
|
||||
size
|
||||
}
|
||||
|
||||
start += size
|
||||
return item
|
||||
})
|
||||
|
||||
return {
|
||||
getVirtualItems: () => items,
|
||||
getTotalSize: () => start
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user