Context

Because of the getComputedStyle call on every shoelace menu item, rendering menu items for each item of a list is slow: each call to getComputedStyle triggers a reflow, and this happens for each menu item on each menu on each list item. There's some discussion of this here: shoelace-style/shoelace#773 (comment).

Because of this, rendering the whole org list when there are hundreds of orgs locks up the main thread for sometimes several seconds. While pagination is possible for this, it seems a little pointless given we're already doing client-side filtering/search, so instead I've implemented virtualized scrolling.

Changes

This PR uses TanStack Virtual to implement virtualized scrolling for the superadmin org list. Rather than rendering all of the items all of the time, this only renders the items visible on screen, and updates when scrolling. This significantly improves the initial rendering time, as well as responsiveness when updating search and filters.

This does break subgrid rendering, which means we can't adjust the table spacing to match its contents automatically — but we've already got an overflow scroller on this table, so we can just set some sensible minimum column widths and amounts they expand when given space with minmax(<fixed_width>, <n>fr), and then handle long titles with truncation and title attributes.¹

It also adds a patch to @shoelace-style/shoelace that swaps out getComputedStyle for LocalizeController to determine whether or not to display menu items as RTL. This significantly improves performance when rendering this list, as well as all other lists of items where each item has a dropdown menu. It also removes an older unused/unneeded patch for an older version of shoelace — shoelace now is now packaged slightly differently, and it seems the older patch isn't necessary anymore.

Finally, it adds debounced updates when entering search values, which improves the responsiveness of the search input, since searching many items with Fuse.js can take a bit of time. In the future, maybe we want to look into PartyTown, which would let us run Fuse.js in a web worker separate from the main thread and therefore not block user input while searching at all, but for now this reduces how often searches cause user-input-blocking main thread hangs.

Testing

Log into an instance with many orgs as superadmin (I tested with prod, but be careful!), and poke around the superadmin org list. Try entering search terms, switching filters, and scrolling.

Ensure that:

• Links to orgs work (i.e. I haven't broken the table layout)
• Dropdown menus work (i.e. I haven't broken menu items)