Slow table rendering with sl-dropdown

[niceblex33]

I faced slow table rendering after switching the dropdown plugin from Bootstrap to Shoelace.

My page has a table with 700 rows, and each row needs a dropdown. The dropdown content is generated by the backend for each item. When I used the Bootstrap plugin, I didn't like that I had to manually adjust its positioning (for example, when there was not enough space at the bottom of the page), so I decided to switch to something more flexible.

Now the page loads much slower, taking around 13 seconds in total, which is too long. Using Shoelace adds about 8 seconds to the load time.

Is there a quick way to speed up this component?

Will I have problems with other components, like tooltips in the same table?

Steps to reproduce the problem:

1. Open the link Better to use "Open preview in new tab"
2. Wait for the page to load and measure the time.
3. Turn on the Chrome profiler and check for multiple "recalculate style" events (this might be the issue).
   With the old component, there were no "recalculate style" events. I will also attach a screenshot from the profiler.

Browser version: Version 119.0.6045.123 (Official Build) (64-bit)
OS: Ubuntu

If I try Firefox, the loading time quicker

[claviska]

The biggest factor here is most likely Floating UI, which is used to position each dropdown menu. We can remove this dependency once Anchor Positioning lands in all browsers, which will speed things up drastically.

One suggestion to get you unblocked, off the top of my head, is to use an intersection observer to only show the dropdowns that appear in the viewport. It's not the greatest answer, but it will reduce the number of instances and speed things up. (If needed to prevent shifting, you can replace them with the same trigger button sans the dropdown.)

In the meantime, we welcome any performance improvements the community would like to contribute.