From 0aa70cd5a7d997d6576edf677ab8dbc08735be94 Mon Sep 17 00:00:00 2001
From: Darcy Ye <darcyye@silverhand.io>
Date: Tue, 28 Nov 2023 12:14:27 +0800
Subject: [PATCH] fix(console): add page level loading for SSO details page
 (#4981)

---
 .../console/src/pages/EnterpriseSsoDetails/index.tsx  | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/console/src/pages/EnterpriseSsoDetails/index.tsx b/packages/console/src/pages/EnterpriseSsoDetails/index.tsx
index 71e1f68a3..0076cfa97 100644
--- a/packages/console/src/pages/EnterpriseSsoDetails/index.tsx
+++ b/packages/console/src/pages/EnterpriseSsoDetails/index.tsx
@@ -11,6 +11,7 @@ import Delete from '@/assets/icons/delete.svg';
 import File from '@/assets/icons/file.svg';
 import DetailsPage from '@/components/DetailsPage';
 import DetailsPageHeader from '@/components/DetailsPage/DetailsPageHeader';
+import Skeleton from '@/components/DetailsPage/Skeleton';
 import Drawer from '@/components/Drawer';
 import Markdown from '@/components/Markdown';
 import PageMeta from '@/components/PageMeta';
@@ -21,6 +22,7 @@ import TabNav, { TabNavItem } from '@/ds-components/TabNav';
 import type { RequestError } from '@/hooks/use-api';
 import useApi from '@/hooks/use-api';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
+import useUserAssetsService from '@/hooks/use-user-assets-service';
 
 import SsoConnectorLogo from '../EnterpriseSso/SsoConnectorLogo';
 import {
@@ -44,11 +46,14 @@ function EnterpriseSsoConnectorDetails<T extends SsoProviderName>() {
   const [isDeleted, setIsDeleted] = useState(false);
   const [isReadmeOpen, setIsReadmeOpen] = useState(false);
 
+  const { isLoading: isUserAssetServiceLoading } = useUserAssetsService();
+
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
     data: ssoConnector,
     error: requestError,
     mutate,
+    isLoading: isSsoConnectorLoading,
   } = useSWR<SsoConnectorWithProviderConfigWithGeneric<T>, RequestError>(
     ssoConnectorId && `api/sso-connectors/${ssoConnectorId}`,
     { keepPreviousData: true }
@@ -67,7 +72,7 @@ function EnterpriseSsoConnectorDetails<T extends SsoProviderName>() {
               .identityProvider
         ));
 
-  const isLoading = !ssoConnector && !requestError;
+  const isLoading = isSsoConnectorLoading || isUserAssetServiceLoading;
 
   const api = useApi();
   const { navigate } = useTenantPathname();
@@ -108,14 +113,14 @@ function EnterpriseSsoConnectorDetails<T extends SsoProviderName>() {
     <DetailsPage
       backLink={enterpriseSsoPathname}
       backLinkTitle="enterprise_sso_details.back_to_sso_connectors"
-      isLoading={isLoading}
       error={requestError}
       onRetry={() => {
         void mutate();
       }}
     >
       <PageMeta titleKey="enterprise_sso_details.page_title" />
-      {ssoConnector && (
+      {isLoading && <Skeleton />}
+      {!isLoading && ssoConnector && (
         <>
           <DetailsPageHeader
             icon={