fix: [UIE-9733] - Optimize rendering of entities in AssignedRolesTable

packages/manager/.changeset/pr-13173-fixed-1764944067009.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Optimize rendering of entities in AssignedRolesTable ([#13173](https://github.com/linode/manager/pull/13173))

packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx

@@ -34,7 +34,13 @@ export const AssignedEntities = ({
     return sortByString(a.name, b.name, 'asc');
   });
 
-  const items = sortedEntities?.map((entity: CombinedEntity) => (
+  // We don't need to send all items to the TruncatedList component for performance reasons,
+  // since past a certain count they will be hidden within the row.
+  const MAX_ITEMS_TO_RENDER = 15;
+  const entitiesToRender = sortedEntities.slice(0, MAX_ITEMS_TO_RENDER);
+  const totalCount = sortedEntities.length;
+
+  const items = entitiesToRender?.map((entity: CombinedEntity) => (
     <Box
       key={entity.id}
       sx={{
@@ -75,37 +81,42 @@ export const AssignedEntities = ({
     <Box>
       <TruncatedList
         addEllipsis
-        customOverflowButton={(numHiddenItems) => (
-          <Box
-            sx={{
-              alignItems: 'center',
-              backgroundColor:
-                theme.name === 'light'
-                  ? theme.tokens.color.Ultramarine[20]
-                  : theme.tokens.color.Neutrals.Black,
-              borderRadius: 1,
-              display: 'flex',
-              height: '20px',
-              maxWidth: 'max-content',
-              padding: `${theme.tokens.spacing.S4} ${theme.tokens.spacing.S8}`,
-              position: 'relative',
-              top: 2,
-            }}
-          >
-            <Tooltip placement="top" title="Click to View All Entities">
-              <Button
-                onClick={() => onButtonClick(role.name as EntityRoleType)}
-                sx={{
-                  color: theme.tokens.alias.Content.Text.Primary.Default,
-                  font: theme.tokens.alias.Typography.Label.Regular.Xs,
-                  padding: 0,
-                }}
-              >
-                +{numHiddenItems}
-              </Button>
-            </Tooltip>
-          </Box>
-        )}
+        customOverflowButton={(numHiddenByTruncate) => {
+          const numHiddenItems =
+            totalCount - MAX_ITEMS_TO_RENDER + numHiddenByTruncate;
+
+          return (
+            <Box
+              sx={{
+                alignItems: 'center',
+                backgroundColor:
+                  theme.name === 'light'
+                    ? theme.tokens.color.Ultramarine[20]
+                    : theme.tokens.color.Neutrals.Black,
+                borderRadius: 1,
+                display: 'flex',
+                height: '20px',
+                maxWidth: 'max-content',
+                padding: `${theme.tokens.spacing.S4} ${theme.tokens.spacing.S8}`,
+                position: 'relative',
+                top: 2,
+              }}
+            >
+              <Tooltip placement="top" title="Click to View All Entities">
+                <Button
+                  onClick={() => onButtonClick(role.name as EntityRoleType)}
+                  sx={{
+                    color: theme.tokens.alias.Content.Text.Primary.Default,
+                    font: theme.tokens.alias.Typography.Label.Regular.Xs,
+                    padding: 0,
+                  }}
+                >
+                  +{numHiddenItems}
+                </Button>
+              </Tooltip>
+            </Box>
+          );
+        }}
         justifyOverflowButtonRight
         listContainerSx={{
           width: '100%',