diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/WidgetTrackedEntityRelationship.component.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/WidgetTrackedEntityRelationship.component.js index b3bf1592c4..6037269107 100644 --- a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/WidgetTrackedEntityRelationship.component.js +++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/WidgetTrackedEntityRelationship.component.js @@ -1,5 +1,5 @@ // @flow -import React from 'react'; +import React, { useMemo } from 'react'; import i18n from '@dhis2/d2-i18n'; import type { WidgetTrackedEntityRelationshipProps } from './WidgetTrackedEntityRelationship.types'; import { RelationshipsWidget } from '../common/RelationshipsWidget'; @@ -21,8 +21,12 @@ export const WidgetTrackedEntityRelationship = ({ renderTrackedEntitySearch, renderTrackedEntityRegistration, }: WidgetTrackedEntityRelationshipProps) => { - const { data: relationships, isError } = useRelationships(teiId, RelationshipSearchEntities.TRACKED_ENTITY); - const { data: trackedEntityTypeName } = useTrackedEntityTypeName(trackedEntityTypeId); + const { data: relationships, isError, isLoading: isLoadingRelationships } = useRelationships(teiId, RelationshipSearchEntities.TRACKED_ENTITY); + const { data: trackedEntityTypeName, isLoading: isLoadingTEType } = useTrackedEntityTypeName(trackedEntityTypeId); + + const isLoading = useMemo(() => isLoadingRelationships || isLoadingTEType, + [isLoadingRelationships, isLoadingTEType], + ); if (isError) { return ( @@ -38,6 +42,7 @@ export const WidgetTrackedEntityRelationship = ({ trackedEntityTypeName, interpolation: { escapeValue: false }, })} + isLoading={isLoading} relationships={relationships} cachedRelationshipTypes={cachedRelationshipTypes} sourceId={teiId} diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/RelationshipsWidget.component.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/RelationshipsWidget.component.js index 9cb0d8596f..c0ee94c29d 100644 --- a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/RelationshipsWidget.component.js +++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/RelationshipsWidget.component.js @@ -7,6 +7,7 @@ import { useGroupedLinkedEntities } from './useGroupedLinkedEntities'; import { useRelationshipTypes } from './useRelationshipTypes'; import { LinkedEntitiesViewer } from './LinkedEntitiesViewer.component'; import type { Props, StyledProps } from './relationshipsWidget.types'; +import { LoadingMaskElementCenter } from '../../../LoadingMasks'; const styles = { header: { @@ -21,6 +22,7 @@ const styles = { const RelationshipsWidgetPlain = ({ title, relationships, + isLoading, cachedRelationshipTypes, sourceId, onLinkedRecordClick, @@ -31,6 +33,27 @@ const RelationshipsWidgetPlain = ({ const { data: relationshipTypes } = useRelationshipTypes(cachedRelationshipTypes); const groupedLinkedEntities = useGroupedLinkedEntities(sourceId, relationshipTypes, relationships); + if (isLoading) { + return ( + + + + + + )} + onOpen={() => setOpenStatus(true)} + onClose={() => setOpenStatus(false)} + open={open} + > + + + ); + } + return (
, cachedRelationshipTypes?: RelationshipTypes, + isLoading: boolean, sourceId: string, onLinkedRecordClick: LinkedRecordClick, children: (relationshipTypes: RelationshipTypes) => Node,