refactor(ui): Refactor entity page loading indicators

datahub-web-react/src/app/entity/EntityPage.tsx

@@ -8,7 +8,6 @@ import { useEntityRegistry } from '../useEntityRegistry';
 import analytics, { EventType } from '../analytics';
 import { decodeUrn } from './shared/utils';
 import { useGetGrantedPrivilegesQuery } from '../../graphql/policy.generated';
-import { Message } from '../shared/Message';
 import { UnauthorizedPage } from '../authorization/UnauthorizedPage';
 import { ErrorSection } from '../shared/error/ErrorSection';
 import { VIEW_ENTITY_PAGE } from './shared/constants';
@@ -34,7 +33,7 @@ export const EntityPage = ({ entityType }: Props) => {
     const isLineageSupported = entity.isLineageEnabled();
     const isLineageMode = useIsLineageMode();
     const authenticatedUserUrn = useUserContext()?.user?.urn;
-    const { loading, error, data } = useGetGrantedPrivilegesQuery({
+    const { error, data } = useGetGrantedPrivilegesQuery({
         variables: {
             input: {
                 actorUrn: authenticatedUserUrn as string,
@@ -71,7 +70,6 @@ export const EntityPage = ({ entityType }: Props) => {
 
     return (
         <>
-            {loading && <Message type="loading" content="Loading..." style={{ marginTop: '10%' }} />}
             {error && <ErrorSection />}
             {data && !canViewEntityPage && <UnauthorizedPage />}
             {canViewEntityPage &&

datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx

@@ -4,7 +4,6 @@ import { MutationHookOptions, MutationTuple, QueryHookOptions, QueryResult } fro
 import styled from 'styled-components/macro';
 import { useHistory } from 'react-router';
 import { EntityType, Exact } from '../../../../../types.generated';
-import { Message } from '../../../../shared/Message';
 import {
     getEntityPath,
     getOnboardingStepIdsForEntityType,
@@ -274,7 +273,6 @@ export const EntityProfile = <T, U>({
                 }}
             >
                 <>
-                    {loading && <Message type="loading" content="Loading..." style={{ marginTop: '10%' }} />}
                     {(error && <ErrorSection />) ||
                         (!loading && (
                             <CompactProfile>
@@ -323,7 +321,6 @@ export const EntityProfile = <T, U>({
                         banner
                     />
                 )}
-                {loading && <Message type="loading" content="Loading..." style={{ marginTop: '10%' }} />}
                 {(error && <ErrorSection />) || (
                     <ContentContainer>
                         {isLineageMode ? (

datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHeader.tsx

@@ -16,6 +16,7 @@ import ShareButton from '../../../../../shared/share/ShareButton';
 import { capitalizeFirstLetterOnly } from '../../../../../shared/textUtil';
 import { useUserContext } from '../../../../../context/useUserContext';
 import { useEntityRegistry } from '../../../../../useEntityRegistry';
+import EntityHeaderLoadingSection from './EntityHeaderLoadingSection';
 
 const TitleWrapper = styled.div`
     display: flex;
@@ -81,7 +82,7 @@ type Props = {
 };
 
 export const EntityHeader = ({ headerDropdownItems, headerActionItems, isNameEditable, subHeader }: Props) => {
-    const { urn, entityType, entityData } = useEntityData();
+    const { urn, entityType, entityData, loading } = useEntityData();
     const refetch = useRefetch();
     const me = useUserContext();
     const platformName = getPlatformName(entityData);
@@ -99,25 +100,32 @@ export const EntityHeader = ({ headerDropdownItems, headerActionItems, isNameEdi
         <>
             <HeaderContainer data-testid="entity-header-test-id">
                 <MainHeaderContent>
-                    <PlatformContent />
-                    <TitleWrapper>
-                        <EntityName isNameEditable={canEditName} />
-                        {entityData?.deprecation?.deprecated && (
-                            <DeprecationPill
-                                urn={urn}
-                                deprecation={entityData?.deprecation}
-                                showUndeprecate
-                                refetch={refetch}
-                            />
-                        )}
-                        {entityData?.health && (
-                            <EntityHealth
-                                health={entityData.health}
-                                baseUrl={entityRegistry.getEntityUrl(entityType, urn)}
+                    {(loading && <EntityHeaderLoadingSection />) || (
+                        <>
+                            <PlatformContent />
+                            <TitleWrapper>
+                                <EntityName isNameEditable={canEditName} />
+                                {entityData?.deprecation?.deprecated && (
+                                    <DeprecationPill
+                                        urn={urn}
+                                        deprecation={entityData?.deprecation}
+                                        showUndeprecate
+                                        refetch={refetch}
+                                    />
+                                )}
+                                {entityData?.health && (
+                                    <EntityHealth
+                                        health={entityData.health}
+                                        baseUrl={entityRegistry.getEntityUrl(entityType, urn)}
+                                    />
+                                )}
+                            </TitleWrapper>
+                            <EntityCount
+                                entityCount={entityCount}
+                                displayAssetsText={entityType === EntityType.DataProduct}
                             />
-                        )}
-                    </TitleWrapper>
-                    <EntityCount entityCount={entityCount} displayAssetsText={entityType === EntityType.DataProduct} />
+                        </>
+                    )}
                 </MainHeaderContent>
                 <SideHeaderContent>
                     <TopButtonsWrapper>

datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHeaderLoadingSection.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Skeleton, Space } from 'antd';
+import styled from 'styled-components';
+import { ANTD_GRAY } from '../../../constants';
+
+const ContextSkeleton = styled(Skeleton.Input)`
+    && {
+        width: 320px;
+        border-radius: 4px;
+        background-color: ${ANTD_GRAY[3]};
+    }
+`;
+
+const NameSkeleton = styled(Skeleton.Input)`
+    && {
+        width: 240px;
+        border-radius: 4px;
+        background-color: ${ANTD_GRAY[3]};
+    }
+`;
+
+export default function EntityHeaderLoadingSection() {
+    return (
+        <Space direction="vertical">
+            <ContextSkeleton active size="small" />
+            <NameSkeleton active size="default" />
+        </Space>
+    );
+}

datahub-web-react/src/app/lineage/LineageExplorer.tsx

@@ -3,7 +3,6 @@ import { useHistory } from 'react-router';
 import { Button, Drawer } from 'antd';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
-import { Message } from '../shared/Message';
 import { useEntityRegistry } from '../useEntityRegistry';
 import CompactContext from '../shared/CompactContext';
 import { EntityAndType, EntitySelectParams, FetchedEntities } from './types';
@@ -18,12 +17,10 @@ import { ErrorSection } from '../shared/error/ErrorSection';
 import usePrevious from '../shared/usePrevious';
 import { useGetLineageTimeParams } from './utils/useGetLineageTimeParams';
 import analytics, { EventType } from '../analytics';
+import LineageLoadingSection from './LineageLoadingSection';
 
 const DEFAULT_DISTANCE_FROM_TOP = 106;
 
-const LoadingMessage = styled(Message)`
-    margin-top: 10%;
-`;
 const FooterButtonGroup = styled.div`
     display: flex;
     justify-content: space-between;
@@ -167,7 +164,7 @@ export default function LineageExplorer({ urn, type }: Props) {
     return (
         <>
             {error && <ErrorSection />}
-            {loading && <LoadingMessage type="loading" content="Loading..." />}
+            {loading && <LineageLoadingSection />}
             {!!data && (
                 <div>
                     <LineageViz

datahub-web-react/src/app/lineage/LineageLoadingSection.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { LoadingOutlined } from '@ant-design/icons';
+import { ANTD_GRAY } from '../entity/shared/constants';
+
+const Container = styled.div`
+    height: auto;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(250, 250, 250);
+`;
+
+const StyledLoading = styled(LoadingOutlined)`
+    font-size: 36px;
+    color: ${ANTD_GRAY[7]};
+    padding-bottom: 18px;
+]`;
+
+export default function LineageLoadingSection() {
+    return (
+        <Container>
+            <StyledLoading />
+        </Container>
+    );
+}