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 ;
}