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 (
+