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:
Alexander Brown
2026-01-08 19:05:55 -08:00
committed by GitHub
parent 644a8bc60c
commit 51a7654a39
2 changed files with 35 additions and 22 deletions

View File

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