diff --git a/datahub-web-react/src/app/entity/glossaryNode/ChildrenTab.tsx b/datahub-web-react/src/app/entity/glossaryNode/ChildrenTab.tsx
index c9a58d165d0af..27aca79d07931 100644
--- a/datahub-web-react/src/app/entity/glossaryNode/ChildrenTab.tsx
+++ b/datahub-web-react/src/app/entity/glossaryNode/ChildrenTab.tsx
@@ -11,6 +11,8 @@ function ChildrenTab() {
const { entityData } = useEntityData();
const entityRegistry = useEntityRegistry();
+ if (!entityData) return <>>;
+
const childNodes = entityData?.children?.relationships
.filter((child) => child.entity?.type === EntityType.GlossaryNode)
.sort((nodeA, nodeB) => sortGlossaryNodes(entityRegistry, nodeA.entity, nodeB.entity))
diff --git a/datahub-web-react/src/app/glossary/GlossaryBrowser/NodeItem.tsx b/datahub-web-react/src/app/glossary/GlossaryBrowser/NodeItem.tsx
index b51093cf67738..f1af3f20b44a8 100644
--- a/datahub-web-react/src/app/glossary/GlossaryBrowser/NodeItem.tsx
+++ b/datahub-web-react/src/app/glossary/GlossaryBrowser/NodeItem.tsx
@@ -1,4 +1,4 @@
-import { FolderOutlined, RightOutlined, DownOutlined } from '@ant-design/icons';
+import { FolderOutlined, RightOutlined, DownOutlined, LoadingOutlined } from '@ant-design/icons';
import styled from 'styled-components/macro';
import React, { useState, useEffect } from 'react';
import { ANTD_GRAY } from '../../entity/shared/constants';
@@ -45,6 +45,17 @@ const ChildrenWrapper = styled.div`
padding-left: 12px;
`;
+const LoadingWrapper = styled.div`
+ padding: 8px;
+ display: flex;
+ justify-content: center;
+
+ svg {
+ height: 15px;
+ width: 15px;
+ }
+`;
+
interface Props {
node: GlossaryNode;
isSelecting?: boolean;
@@ -63,7 +74,7 @@ function NodeItem(props: Props) {
const [areChildrenVisible, setAreChildrenVisible] = useState(false);
const entityRegistry = useEntityRegistry();
const { entityData } = useEntityData();
- const { data } = useGetGlossaryNodeQuery({
+ const { data, loading } = useGetGlossaryNodeQuery({
variables: { urn: node.urn },
skip: !areChildrenVisible || shouldHideNode,
});
@@ -126,24 +137,33 @@ function NodeItem(props: Props) {
)}
- {areChildrenVisible && data && data.glossaryNode && (
-
- {(childNodes as GlossaryNode[]).map((child) => (
-
- ))}
- {!hideTerms &&
- (childTerms as GlossaryTerm[]).map((child) => (
-
- ))}
-
+ {areChildrenVisible && (
+ <>
+ {!data && loading && (
+
+
+
+ )}
+ {data && data.glossaryNode && (
+
+ {(childNodes as GlossaryNode[]).map((child) => (
+
+ ))}
+ {!hideTerms &&
+ (childTerms as GlossaryTerm[]).map((child) => (
+
+ ))}
+
+ )}
+ >
)}
);
diff --git a/datahub-web-react/src/app/glossary/GlossaryEntitiesList.tsx b/datahub-web-react/src/app/glossary/GlossaryEntitiesList.tsx
index ad95acba11844..dc606d525e79c 100644
--- a/datahub-web-react/src/app/glossary/GlossaryEntitiesList.tsx
+++ b/datahub-web-react/src/app/glossary/GlossaryEntitiesList.tsx
@@ -27,7 +27,7 @@ function GlossaryEntitiesList(props: Props) {
name={node.properties?.name || ''}
urn={node.urn}
type={node.type}
- count={(node as GlossaryNodeFragment).children?.count}
+ count={(node as GlossaryNodeFragment).children?.total}
/>
))}
{terms.map((term) => (
diff --git a/datahub-web-react/src/graphql/fragments.graphql b/datahub-web-react/src/graphql/fragments.graphql
index 5019621f79a47..20d6f86d858c9 100644
--- a/datahub-web-react/src/graphql/fragments.graphql
+++ b/datahub-web-react/src/graphql/fragments.graphql
@@ -19,8 +19,8 @@ fragment glossaryNode on GlossaryNode {
properties {
name
}
- children: relationships(input: { types: ["IsPartOf"], direction: INCOMING, start: 0, count: 1000 }) {
- count
+ children: relationships(input: { types: ["IsPartOf"], direction: INCOMING, start: 0, count: 10000 }) {
+ total
}
}
diff --git a/datahub-web-react/src/graphql/glossaryNode.graphql b/datahub-web-react/src/graphql/glossaryNode.graphql
index 586c9167ee260..b0d4d8fc7f3c7 100644
--- a/datahub-web-react/src/graphql/glossaryNode.graphql
+++ b/datahub-web-react/src/graphql/glossaryNode.graphql
@@ -1,3 +1,11 @@
+fragment childGlossaryTerm on GlossaryTerm {
+ name
+ hierarchicalName
+ properties {
+ name
+ }
+}
+
query getGlossaryNode($urn: String!) {
glossaryNode(urn: $urn) {
urn
@@ -17,19 +25,19 @@ query getGlossaryNode($urn: String!) {
types: ["IsPartOf"]
direction: INCOMING
start: 0
- count: 1000
+ count: 10000
}
) {
- count
relationships {
direction
entity {
type
+ urn
... on GlossaryNode {
...glossaryNode
}
... on GlossaryTerm {
- ...glossaryTerm
+ ...childGlossaryTerm
}
}
}