[4575] Memoize the style of a label

Bug: #4575
Signed-off-by: Michaël Charfadi <[email protected]>

CHANGELOG.adoc

@@ -76,6 +76,7 @@ Except for the specific case where `cause === 'refresh'` in `DiagramRenderer` (w
 - https://github.com/eclipse-sirius/sirius-web/issues/4469[#4469] [table] Remove useless mutations send at the table opening
 - https://github.com/eclipse-sirius/sirius-web/issues/4583[#4583] [sirius-web] Improve the performance to retrieve if a representation is view based
 - https://github.com/eclipse-sirius/sirius-web/issues/4451[#4451] [diagram] Keep using the same node after a refresh if possible in order to avoid rerendering all the nodes after converting the diagram
+- https://github.com/eclipse-sirius/sirius-web/issues/4575[#4575] [diagram] Memoize the style of a label to avoid rerendering them all when refreshing the diagram
 
 
 

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/Label.tsx

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023, 2024 Obeo.
+ * Copyright (c) 2023, 2025 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -13,7 +13,7 @@
 
 import { getCSSColor, IconOverlay } from '@eclipse-sirius/sirius-components-core';
 import { Theme, useTheme } from '@mui/material/styles';
-import { memo, useContext } from 'react';
+import { memo, useContext, useMemo } from 'react';
 import { DiagramContext } from '../contexts/DiagramContext';
 import { DiagramContextValue } from '../contexts/DiagramContext.types';
 import { EdgeLabel, InsideLabel, LabelOverflowStrategy, OutsideLabel } from './DiagramRenderer.types';
@@ -121,6 +121,10 @@ export const Label = memo(({ diagramElementId, label, faded }: LabelProps) => {
     }
   };
 
+  const customIconStyle = useMemo(() => {
+    return { marginRight: theme.spacing(1) };
+  }, []);
+
   const content: JSX.Element =
     label.id === currentlyEditedLabelId && !readOnly ? (
       <DiagramDirectEditInput editingKey={editingKey} onClose={handleClose} labelId={label.id} />
@@ -129,7 +133,7 @@ export const Label = memo(({ diagramElementId, label, faded }: LabelProps) => {
         data-id={`${label.id}-content`}
         data-testid={`Label content - ${label.text}`}
         style={labelContentStyle(theme, label)}>
-        <IconOverlay iconURL={label.iconURL} alt={label.text} customIconStyle={{ marginRight: theme.spacing(1) }} />
+        <IconOverlay iconURL={label.iconURL} alt={label.text} customIconStyle={customIconStyle} />
         <div style={labelOverflowStyle(label)}>{label.text}</div>
       </div>
     );