Skip to content

Add virtualization via Headless UI's virtual prop#3221

Merged
david-crespo merged 14 commits into
mainfrom
combobox_virtualization
May 29, 2026
Merged

Add virtualization via Headless UI's virtual prop#3221
david-crespo merged 14 commits into
mainfrom
combobox_virtualization

Conversation

@charliepark
Copy link
Copy Markdown
Contributor

@charliepark charliepark commented May 18, 2026

Headless UI added a virtual prop to easily enable virtualization, so we're using that here to virtualize our combobox lists. Scrolling in Chrome definitely feels smoother.

For manual testing, the other-project project has a lot of existing disks, so going to http://localhost:4000/projects/other-project/instances-new and setting the boot disk to the existing disks tab will get you a dropdown with a lot of disks

@vercel
Copy link
Copy Markdown

vercel Bot commented May 18, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
console Ready Ready Preview May 29, 2026 4:59am

Request Review

david-crespo and others added 3 commits May 26, 2026 09:58
Just make the types pass. Followup PR will add new `contact_support`
field on update status page.
@charliepark charliepark marked this pull request as ready for review May 27, 2026 18:33
@david-crespo
Copy link
Copy Markdown
Collaborator

Tested it in Firefox on the snapshot create form by making all 1000 disks in other-project snapshottable (see diff below). HUGE difference. With this change, the combobox opens instantly and filters instantly. Without it, the list takes a good second or two to open and just as long to filter when you type. Very nice.

The only issue I ran into is almost definitely fine: when I scroll as fast as I can through the list, it occasionally hits a wall and stops scrolling, presumably because it's hitting the limit of what is currently rendered. But I am scrolling really, really fast to get this.

diff --git a/app/api/util.ts b/app/api/util.ts
index f3091f865c..e0c437df75 100644
--- a/app/api/util.ts
+++ b/app/api/util.ts
@@ -225,6 +225,7 @@
   | Pick<Disk, 'state' | 'diskType' | 'readOnly'>
   | { state: DiskState; disk_type: DiskType; read_only: boolean }
 const canSnapshot = (d: SnapshotDisk) => {
+  return true
   const diskType = 'diskType' in d ? d.diskType : d.disk_type
   const readOnly = 'readOnly' in d ? d.readOnly : d.read_only
   return (

Comment thread app/ui/lib/Combobox.tsx
Comment thread app/ui/lib/Combobox.tsx Outdated
Comment thread app/ui/lib/Combobox.tsx
Comment thread app/ui/lib/Combobox.tsx
Comment thread app/ui/lib/Combobox.tsx Outdated
Comment thread app/ui/lib/Combobox.tsx Outdated
Comment thread app/ui/lib/Combobox.tsx
Comment thread app/ui/lib/Combobox.tsx Outdated
Comment thread app/ui/lib/Combobox.tsx
@david-crespo david-crespo merged commit 1b2161a into main May 29, 2026
7 checks passed
@david-crespo david-crespo deleted the combobox_virtualization branch May 29, 2026 16:47
david-crespo added a commit to oxidecomputer/omicron that referenced this pull request Jun 2, 2026
### Most interesting bits

* [f9366d37](oxidecomputer/console@f9366d37)
oxidecomputer/console#3212
* [621c61b9](oxidecomputer/console@621c61b9)
oxidecomputer/console#3216
* [0abdd33e](oxidecomputer/console@0abdd33e)
oxidecomputer/console#3226
* [1b2161a9](oxidecomputer/console@1b2161a9)
oxidecomputer/console#3221

### Full list

oxidecomputer/console@a3b4757...0c8fd96

* [0c8fd96e](oxidecomputer/console@0c8fd96e)
oxidecomputer/console#3236
* [f9366d37](oxidecomputer/console@f9366d37)
oxidecomputer/console#3212
* [621c61b9](oxidecomputer/console@621c61b9)
oxidecomputer/console#3216
* [0abdd33e](oxidecomputer/console@0abdd33e)
oxidecomputer/console#3226
* [aea69234](oxidecomputer/console@aea69234)
oxidecomputer/console#3232
* [1b2161a9](oxidecomputer/console@1b2161a9)
oxidecomputer/console#3221
* [c95be72c](oxidecomputer/console@c95be72c)
oxidecomputer/console#3230
* [576ce52a](oxidecomputer/console@576ce52a)
oxidecomputer/console#3228
* [337b4e83](oxidecomputer/console@337b4e83)
oxidecomputer/console#3227
* [aa608203](oxidecomputer/console@aa608203)
oxidecomputer/console#3224
* [099d4633](oxidecomputer/console@099d4633)
oxidecomputer/console#3210
* [8013fcbc](oxidecomputer/console@8013fcbc)
oxidecomputer/console#3205
* [72996fed](oxidecomputer/console@72996fed)
oxidecomputer/console#3208
* [acf669ba](oxidecomputer/console@acf669ba)
oxidecomputer/console#3206
* [1761f9e8](oxidecomputer/console@1761f9e8)
oxidecomputer/console#3204
* [5a65a9f8](oxidecomputer/console@5a65a9f8)
oxidecomputer/console#3203
* [1dfbde82](oxidecomputer/console@1dfbde82)
oxidecomputer/console#3188
* [93ae4397](oxidecomputer/console@93ae4397)
oxidecomputer/console#3200
* [d169f5b0](oxidecomputer/console@d169f5b0)
oxidecomputer/console#3199
* [145f0735](oxidecomputer/console@145f0735)
oxidecomputer/console#3174
* [a2773c47](oxidecomputer/console@a2773c47)
oxidecomputer/console#3198
* [4a9be313](oxidecomputer/console@4a9be313)
oxidecomputer/console#3196
* [93f206c2](oxidecomputer/console@93f206c2)
oxidecomputer/console#3178
* [03ff84ea](oxidecomputer/console@03ff84ea)
oxidecomputer/console#3194
* [59f225eb](oxidecomputer/console@59f225eb)
oxidecomputer/console#3192
* [f25398dd](oxidecomputer/console@f25398dd)
oxidecomputer/console#3186
* [0e1fef07](oxidecomputer/console@0e1fef07)
oxidecomputer/console#3191
* [be0d7a26](oxidecomputer/console@be0d7a26)
oxidecomputer/console#3189
* [376009c8](oxidecomputer/console@376009c8)
oxidecomputer/console#3187
* [7bf337b0](oxidecomputer/console@7bf337b0)
oxidecomputer/console#3181
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants