This works perfectly fine in Firefox and renders instantly, as expected.
But, in Chrome it takes 10 seconds (!) to render the select (removing it, or replacing the data with empty list makes the rendering work instantly).
Profiling in Chrome show that it stays in “Recalculate Style” step for all of this time, which doesn’t really make much sense as there are no classes involved on select or options inside of it.
Profiling mentions the removeClass method from phoenix_liveview.js :
removeClass @ phoenix_live_view.js?2c90:1
This seems like a really trivial case, and issue seems to be client-side. Lowering the number of items sent (e.g. Enum.take(countries, 10) makes the whole thing work fine in Chrome, but obviously this just confirms the issue is the processing of the returned data on the client side, and is not usable as a solution.
Weird issue, any ideas what to look at to solve this?
I am fairly sure this is not (at least not wholly) an issue with LiveView, but rather browser rendering in general. I’ve gotten the same problem before with large select/options list and my search led me to believe it was browser related.
Yes, and closed it. It is related to Chrome somehow:
It seems to be an issue, in my case, somewhere in the classes imported from tailwindcss/utilities (removing tailwindcss/utilities makes rendering of selects instant), which seem to cause the browser to recalculate some expensive rendering operations for “large” number of options in a select field. I still haven’t found the exact CSS issue.