From e7b1584b6ae42ccf35f866e82e560c237bb1f260 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Fri, 28 Mar 2025 17:49:05 +0100
Subject: [PATCH] Remove raw target labels from DOM when collapsed (#16342)

Should help a bit with https://github.com/prometheus/prometheus/issues/16308

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 .../mantine-ui/src/pages/targets/TargetLabels.tsx   | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/web/ui/mantine-ui/src/pages/targets/TargetLabels.tsx b/web/ui/mantine-ui/src/pages/targets/TargetLabels.tsx
index 472eded0f3..a6f1a069cb 100644
--- a/web/ui/mantine-ui/src/pages/targets/TargetLabels.tsx
+++ b/web/ui/mantine-ui/src/pages/targets/TargetLabels.tsx
@@ -35,10 +35,15 @@ const TargetLabels: FC<TargetLabelsProps> = ({ discoveredLabels, labels }) => {
       </Group>
 
       <Collapse in={showDiscovered}>
-        <Text fw={700} size="1em" my="lg" c="gray.7">
-          Discovered labels:
-        </Text>
-        <LabelBadges color="blue" labels={discoveredLabels} />
+        {/* Additionally remove DOM elements when not expanded (helps performance) */}
+        {showDiscovered && (
+          <>
+            <Text fw={700} size="1em" my="lg" c="gray.7">
+              Discovered labels:
+            </Text>
+            <LabelBadges color="blue" labels={discoveredLabels} />
+          </>
+        )}
       </Collapse>
     </Stack>
   );