chore: loading spinner

dhis2 · Sep 12, 2023 · d978ed8 · d978ed8
1 parent 07766e1
commit d978ed8
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/...Relationship/WidgetTrackedEntityRelationship/WidgetTrackedEntityRelationship.component.js b/...Relationship/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/...omponents/WidgetsRelationship/common/RelationshipsWidget/RelationshipsWidget.component.js b/...omponents/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 (
+            <Widget
+                header={(
+                    <div className={classes.header}>
+                        <span className={classes.icon}>
+                            <IconLink24 />
+                        </span>
+                    </div>
+                )}
+                onOpen={() => setOpenStatus(true)}
+                onClose={() => setOpenStatus(false)}
+                open={open}
+            >
+                <LoadingMaskElementCenter
+                    containerStyle={{ height: '100px', marginBottom: '50px' }}
+                />
+            </Widget>
+        );
+    }
+
     return (
         <div
             data-test="relationship-widget"

diff --git a/...re/components/WidgetsRelationship/common/RelationshipsWidget/relationshipsWidget.types.js b/...re/components/WidgetsRelationship/common/RelationshipsWidget/relationshipsWidget.types.js
@@ -7,6 +7,7 @@ export type Props = $ReadOnly<{|
     title: string,
     relationships?: Array<InputRelationshipData>,
     cachedRelationshipTypes?: RelationshipTypes,
+    isLoading: boolean,
     sourceId: string,
     onLinkedRecordClick: LinkedRecordClick,
     children: (relationshipTypes: RelationshipTypes) => Node,