search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.99k stars 838 forks source link

Is it possible to reduce styles recalculation time? #2320

Closed awfulminded closed 9 months ago

awfulminded commented 1 year ago

I have noticed a performance concern regarding the styles recalculation time in Radix-UI Dialog. While experimenting with cloning nodes from the official documentation page, I observed that the interaction time increased significantly from 50ms to 200ms. Though I understand that having 10k nodes is quite excessive, it is not uncommon to find websites with similar quantities of elements performing adequately.

My intention is not to report a bug but rather to inquire if there is any feasible approach to reduce the styles recalculation time. I have raised a similar issue on the Chakra-UI library (https://github.com/chakra-ui/chakra-ui/issues/7909), but the behavior appears slightly different in that context.

Any assistance or insights on this matter would be greatly appreciated. Thank you!

https://github.com/radix-ui/primitives/assets/100774881/2be7e298-f2be-44f8-968e-9d0fe0e50488

SaveliiLukash commented 1 year ago

Wow, just faced this today and here is a fresh open issue.

While "Recalculate styles" is bearable in Firefox and Chrome (40.14 ms), in my case it appears to be an issue in Safari (336.7 ms), both MacOS and iOS. A noticeable delay when opening the menu

https://github.com/radix-ui/primitives/assets/78015938/1455c915-9930-4655-b4ce-0c9d01e9c609

First project using radix-ui, was using react-bootstrap for a long time before and had never faced such an issue. Would appreciate any insights and advice.

awfulminded commented 1 year ago

Wow, just faced this today and here is a fresh open issue.

While "Recalculate styles" is bearable in Firefox and Chrome (40.14 ms), in my case it appears to be an issue in Safari (336.7 ms), both MacOS and iOS. A noticeable delay when opening the menu

CleanShot.2023-08-04.at.20.11.50.mp4 First project using radix-ui, was using react-bootstrap for a long time before and had never faced such an issue. Would appreciate any insights and advice.

Hey!

if you still have this issue with radix, you should check mu chakra-ui issues with pretty much simillar problem, there is potential solution for this https://github.com/chakra-ui/chakra-ui/issues/7909

benoitgrelard commented 9 months ago

Let's concentrate on a single issue rather than have lots of duplicates for the same thing: #1634