commercetools
CollapsiblePanel - Improve performance of collapsed content
Performance Problem
In pages with several instances of a CollapsiblePanel, or when it has a "heavy" content, keeping the content rendered even when the panel is collapsed may cause performance issues.
An example of this was demonstrated by @tdeekens in https://github.com/commercetools/merchant-center-frontend/pull/8626, among with possible solutions.
Possible Solutions
We could provide ways of improving the performance significantly by:
- not rendering the content at all until the Panel is opened -- though we must ensure the animation still works smoothly as intended.
- using the hidden React attribute which allows pre-rendering without committing to the DOM.
These optimization techniques should be chosen through an optional prop, to be enabled consciously instead of becoming the default, as there are potential breaking implications of not rendering the content initially.
We should also study how other libraries are solving this problem.
Hello, I came here from google. Would it be possible to make the information that is linked https://github.com/commercetools/merchant-center-frontend/pull/8626 also publicly available?
Hi @DavidSanwald, sorry I didn't see your comment before.
I can't display all the information in there, but I've tried to reproduce its content within this issue.
The problem initially arose from a case of a list of many CollapsiblePanel components in one page and each of them contains a lot of stuff, making the whole page heavy even when all panels are collapsed.
The first solution was tested and proved to be the fastest but it makes the animation jump a bit. However, the animation was already getting janky before because of how heavy the page was, so one could say the trade-off is worthwhile.
The second solution is not as performant as the first but still an improvement compared to the status quo.