UI: Speed up alerts/rules/... pages by not rendering collapsed content#17485
Merged
UI: Speed up alerts/rules/... pages by not rendering collapsed content#17485
Conversation
b7b3b35 to
76f69c5
Compare
In contrast to Bootstrap, Mantine's Accordion component didn't remove its panel contents from the DOM when collapsed, so rendering pages with lots of collapsed Accordion items was way slower and more resource-intensive in the new Mantine UI. While I talked to Vitaly from Mantine and he managed to add unmounting of collapsed panel contents in Mantine 9, this will only be available next year. So for now, I'm forking over the Accordion component from Mantine and adding a hacky modification to it that removes contents for collapsed panels. This fork can be removed after upgrading to Mantine 9 sometime in 2026. I removed all the unnecessary test files and so on and just kept the core Accordion code files. This should really help with the following issues: #17254 #16830 The /alerts and /rules pages should be the most affected since the panels on those are collapsed by default. The /targets and /service-discovery pages have expanded panels by default, but I still swapped out the Accordion implementation for consistency and in case someone collapses a bunch of panels. Signed-off-by: Julius Volz <julius.volz@gmail.com>
76f69c5 to
2b25bbf
Compare
Nexucis
reviewed
Nov 6, 2025
Signed-off-by: Julius Volz <julius.volz@gmail.com>
Member
Author
|
I'm going to force merge this one, as only the Go tests are still continuously failing due to an unrelated thing, for which I filed an issue: #17489 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
In contrast to Bootstrap, Mantine's Accordion component didn't remove its panel contents from the DOM when collapsed, so rendering pages with lots of collapsed Accordion items was way slower and more resource-intensive in the new Mantine UI. While I talked to Vitaly from Mantine and he managed to add unmounting of collapsed panel contents in Mantine 9, this will only be available next year. So for now, I'm forking over the Accordion component from Mantine and adding a hacky modification to it that removes contents for collapsed panels. This fork can be removed after upgrading to Mantine 9 sometime in 2026. I removed all the unnecessary test files and so on and just kept the core Accordion code files.
This should really help with the following issues:
#17254
#16830
The /alerts and /rules pages should be the most affected since the panels on those are collapsed by default. The /targets and /service-discovery pages have expanded panels by default, but I still swapped out the Accordion implementation for consistency and in case someone collapses a bunch of panels.
Demo of old (left) vs. new (right):
unmount-accordion-children.mp4
Which issue(s) does the PR fix:
Fixes #17254
Fixes #16830
Does this PR introduce a user-facing change?