diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx index f9bb4cc4d1df7..04755a85e82d1 100644 --- a/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx +++ b/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx @@ -5,6 +5,7 @@ import type { ProjectGraphProjectNode } from '@nx/devkit'; import { TargetConfigurationDetailsListItem } from '../target-configuration-details-list-item/target-configuration-details-list-item'; import { TargetConfigurationGroupContainer } from '../target-configuration-details-group-container/target-configuration-details-group-container'; import { groupTargets } from '../utils/group-targets'; +import { useMemo } from 'react'; export interface TargetConfigurationGroupListProps { project: ProjectGraphProjectNode; @@ -26,22 +27,54 @@ export function TargetConfigurationGroupList({ onViewInTaskGraph, className = '', }: TargetConfigurationGroupListProps) { - const targetsGroup = groupTargets(project); + const targetsGroup = useMemo(() => groupTargets(project), [project]); + const hasGroups = useMemo(() => { + for (const group of Object.entries(targetsGroup.groups)) { + if (group[1]?.length > 0) return true; + } + return false; + }, [targetsGroup]); - return ( - <> - {Object.entries(targetsGroup.groups).map(([targetGroupName, targets]) => { - if (targets.length === 0) { - return null; - } - return ( - -