mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-02 12:11:58 +00:00
perf(AssetBrowserModal): virtualize asset grid to reduce network requests (#7919)
## Problem The `AssetBrowserModal` triggers hundreds of network requests when opened because `AssetGrid.vue` renders all asset cards immediately using a simple `v-for` loop. Each `AssetCard` loads its thumbnail image, causing a flood of simultaneous requests. ## Solution Replace the simple `v-for` with the existing `VirtualGrid` component (already used in `AssetsSidebarTab.vue` and `ManagerDialogContent.vue`) to only render visible items plus a small buffer. ## Changes - **`AssetGrid.vue`**: Use `VirtualGrid` with computed `assetsWithKey` that adds the required `key` property from `asset.id` - **`BaseModalLayout.vue`**: Add `flex-1` to content container for proper height calculation (required for `VirtualGrid` to work) ## Testing - All 130 asset-related tests pass - TypeScript and lint checks pass ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7919-perf-AssetBrowserModal-virtualize-asset-grid-to-reduce-network-requests-2e36d73d365081a1be18d0eb33b7ef8a) by [Unito](https://www.unito.io) Co-authored-by: Amp <amp@ampcode.com>
This commit is contained in:
@@ -82,7 +82,7 @@
|
||||
{{ contentTitle }}
|
||||
</h2>
|
||||
<div
|
||||
class="min-h-0 px-6 pt-0 pb-10 overflow-y-auto scrollbar-custom"
|
||||
class="min-h-0 flex-1 px-6 pt-0 pb-10 overflow-y-auto scrollbar-custom"
|
||||
>
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user