diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx index 368eee318f3..b1110d69e7f 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx @@ -49,10 +49,8 @@ export const BucketDetailLanding = React.memo(() => { const { aclpServices, objectStorageContextualMetrics } = useFlags(); const { isObjectStorageGen2Enabled } = useIsObjectStorageGen2Enabled(); - const { isError: aclpServiceError } = useCloudPulseServiceByServiceType( - 'objectstorage', - true - ); + const { isError: aclpServiceError, isLoading: aclServiceLoading } = + useCloudPulseServiceByServiceType('objectstorage', true); const { data: bucketsData, @@ -94,7 +92,7 @@ export const BucketDetailLanding = React.memo(() => { }, ]); - if (isPending || isLoading) { + if (isPending || isLoading || aclServiceLoading) { return ; } diff --git a/packages/manager/src/features/Volumes/VolumeDetails/VolumeDetails.tsx b/packages/manager/src/features/Volumes/VolumeDetails/VolumeDetails.tsx index 7d474021681..e82a3613aa7 100644 --- a/packages/manager/src/features/Volumes/VolumeDetails/VolumeDetails.tsx +++ b/packages/manager/src/features/Volumes/VolumeDetails/VolumeDetails.tsx @@ -9,6 +9,7 @@ import { Tabs } from 'src/components/Tabs/Tabs'; import { TanStackTabLinkList } from 'src/components/Tabs/TanStackTabLinkList'; import { useFlags } from 'src/hooks/useFlags'; import { useTabs } from 'src/hooks/useTabs'; +import { useCloudPulseServiceByServiceType } from 'src/queries/cloudpulse/services'; import { VolumeDrawers } from '../VolumeDrawers/VolumeDrawers'; import { VolumeDetailsHeader } from './VolumeDetailsHeader'; @@ -18,6 +19,9 @@ export const VolumeDetails = () => { const { volumeSummaryPage, aclpServices, blockStorageContextualMetrics } = useFlags(); + const { isError: aclpServiceError, isLoading: aclServiceLoading } = + useCloudPulseServiceByServiceType('blockstorage', true); + const { volumeId } = useParams({ from: '/volumes/$volumeId' }); const { data: volume, isLoading, error } = useVolumeQuery(volumeId); const { tabs, handleTabChange, tabIndex } = useTabs([ @@ -29,8 +33,9 @@ export const VolumeDetails = () => { to: '/volumes/$volumeId/metrics', title: 'Metrics', hide: - !aclpServices?.blockstorage?.metrics?.enabled || - !blockStorageContextualMetrics, + aclpServiceError || + !blockStorageContextualMetrics || + !aclpServices?.blockstorage?.metrics?.enabled, chip: aclpServices?.blockstorage?.metrics?.beta ? : null, }, ]); @@ -39,7 +44,7 @@ export const VolumeDetails = () => { return ; } - if (isLoading || !volume) { + if (isLoading || aclServiceLoading || !volume) { return ; }