Modal lags when there are a lot of elements on the page
Unanswered
American Crocodile posted this in #help-forum
American CrocodileOP
Hey everyone! I've encountered an unusual issue while developing a CRM system.
My project involves displaying a significant amount of similar information on the screen. In this video example, I've rendered approximately 80 cards with static text and HTML elements. There are no images or videos, just plain content within the cards.
Strangely, even though all the elements are already rendered, opening the modal window slows down. Surprisingly, there are no re-renders happening with the cards themselves.
My hunch is that the modal might still be triggering updates to the body element, causing the DOM to recalculate everything. But the cards remain unaffected, and other elements like Popovers work smoothly. I've double-checked with the React Profiler, and everything appears stable (you can see the video).
I'm using Next.js 13.4 with pages router and Chakra UI for the interface. However, I want to clarify that the issue is not related to Chakra UI; I even tested Radix UI with basic styles, and the modal window still lags in the same manner.
I would greatly appreciate any assistance or insights. Thanks in advance for your help!
My project involves displaying a significant amount of similar information on the screen. In this video example, I've rendered approximately 80 cards with static text and HTML elements. There are no images or videos, just plain content within the cards.
Strangely, even though all the elements are already rendered, opening the modal window slows down. Surprisingly, there are no re-renders happening with the cards themselves.
My hunch is that the modal might still be triggering updates to the body element, causing the DOM to recalculate everything. But the cards remain unaffected, and other elements like Popovers work smoothly. I've double-checked with the React Profiler, and everything appears stable (you can see the video).
I'm using Next.js 13.4 with pages router and Chakra UI for the interface. However, I want to clarify that the issue is not related to Chakra UI; I even tested Radix UI with basic styles, and the modal window still lags in the same manner.
I would greatly appreciate any assistance or insights. Thanks in advance for your help!