From a0efb9dc1ddd4181947f2931693f719e8e5ddd6c Mon Sep 17 00:00:00 2001
From: Filipe Caetano - OVO
 <150357006+filipe-caetano-ovo@users.noreply.github.com>
Date: Tue, 5 Mar 2024 15:47:41 +0000
Subject: [PATCH] feat(ui): add loading spin to access management table (#9974)

---
 .../Dataset/AccessManagement/AccessManagement.tsx  | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/AccessManagement/AccessManagement.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/AccessManagement/AccessManagement.tsx
index c8125693674190..ebcbc07aa333ef 100644
--- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/AccessManagement/AccessManagement.tsx
+++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/AccessManagement/AccessManagement.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Button, Table } from 'antd';
+import { SpinProps } from 'antd/es/spin';
+import { LoadingOutlined } from '@ant-design/icons';
 import { useBaseEntity } from '../../../EntityContext';
 import { GetDatasetQuery, useGetExternalRolesQuery } from '../../../../../../graphql/dataset.generated';
 import { useGetMeQuery } from '../../../../../../graphql/me.generated';
@@ -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}
+        />
+    )
 }