feat(ui): add loading spin to access management table

datahub-web-react/src/app/entity/shared/tabs/Dataset/AccessManagement/AccessManagement.tsx

@@ -6,6 +6,8 @@ import { GetDatasetQuery, useGetExternalRolesQuery } from '../../../../../../gra
 import { useGetMeQuery } from '../../../../../../graphql/me.generated';
 import { handleAccessRoles } from './utils';
 import AccessManagerDescription from './AccessManagerDescription';
+import { SpinProps } from 'antd/es/spin';
+import { LoadingOutlined } from '@ant-design/icons';
 
 const StyledTable = styled(Table)`
     overflow: inherit;
@@ -59,7 +61,7 @@ const AccessButton = styled(Button)`
 export default function AccessManagement() {
     const { data: loggedInUser } = useGetMeQuery({ fetchPolicy: 'cache-first' });
     const baseEntity = useBaseEntity<GetDatasetQuery>();
-    const { data: externalRoles } = useGetExternalRolesQuery({
+    const { data: externalRoles, loading: isLoading } = useGetExternalRolesQuery({
         variables: { urn: baseEntity?.dataset?.urn as string },
         skip: !baseEntity?.dataset?.urn,
     });
@@ -108,8 +110,12 @@ export default function AccessManagement() {
             hidden: true,
         },
     ];
-
+    const spinProps: SpinProps = { indicator: <LoadingOutlined style={{ fontSize: 28 }} spin /> }
     return (
-        <StyledTable dataSource={handleAccessRoles(externalRoles, loggedInUser)} columns={columns} pagination={false} />
-    );
+        <StyledTable
+            loading={isLoading ? spinProps : false}
+            dataSource={handleAccessRoles(externalRoles, loggedInUser)}
+            columns={columns} pagination={false}
+        />
+    )
 }