Pull request #60: UIE-10782 iam circle progress

Merge in FEE/cloud-manager from UIE-10782-iam-circle-progress to develop

Squashed commit of the following:

commit d0fe1d73dc8618fcf53523316f89af28605fc4ef
Author: mpolotsk <mpolotsk@akamai.com>
Date:   Tue Apr 14 15:50:54 2026 +0200

    rename LoadingSpinner, add test

commit b13587d1e709a5dafc8b9fb3f607749fbe6155cd
Author: mpolotsk <mpolotsk@akamai.com>
Date:   Mon Apr 13 16:22:45 2026 +0200

    UIE-10782 IAM CircleProgress replace

Author: mpolotsk-akamai

packages/manager/src/features/IAM/IAMLanding.tsx

@@ -3,7 +3,6 @@ import { Outlet, useLocation, useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { LandingHeader } from 'src/components/LandingHeader';
-import { SuspenseLoader } from 'src/components/SuspenseLoader';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
 import { TanStackTabLinkList } from 'src/components/Tabs/TanStackTabLinkList';
@@ -16,6 +15,7 @@ import {
   useIsIAMEnabled,
 } from './hooks/useIsIAMEnabled';
 import { IAM_DOCS_LINK, ROLES_LEARN_MORE_LINK } from './Shared/constants';
+import { SuspenseLoader } from './Shared/SuspenseLoader/SuspenseLoader';
 
 export const IdentityAccessLanding = React.memo(() => {
   const flags = useFlags();

packages/manager/src/features/IAM/Roles/Defaults/DefaultEntityAccess.tsx

@@ -1,11 +1,12 @@
 import { useGetDefaultDelegationAccessQuery } from '@linode/queries';
-import { CircleProgress, Notice, Paper, Stack, Typography } from '@linode/ui';
+import { Notice, Paper, Stack, Typography } from '@linode/ui';
 import * as React from 'react';
 
 import { ErrorState } from 'src/features/IAM/Shared/ErrorState/ErrorState';
 
 import { usePermissions } from '../../hooks/usePermissions';
 import { AssignedEntitiesTable } from '../../Shared/AssignedEntitiesTable/AssignedEntitiesTable';
+import { CircleProgress } from '../../Shared/CircleProgress/CircleProgress';
 import { NO_ASSIGNED_DEFAULT_ENTITIES_TEXT } from '../../Shared/constants';
 import { NoAssignedRoles } from '../../Shared/NoAssignedRoles/NoAssignedRoles';
 

packages/manager/src/features/IAM/Roles/Defaults/DefaultRoles.tsx

@@ -1,11 +1,12 @@
 import { useGetDefaultDelegationAccessQuery } from '@linode/queries';
-import { CircleProgress, Notice, Paper, Typography } from '@linode/ui';
+import { Notice, Paper, Typography } from '@linode/ui';
 import * as React from 'react';
 
 import { ErrorState } from 'src/features/IAM/Shared/ErrorState/ErrorState';
 
 import { usePermissions } from '../../hooks/usePermissions';
 import { AssignedRolesTable } from '../../Shared/AssignedRolesTable/AssignedRolesTable';
+import { CircleProgress } from '../../Shared/CircleProgress/CircleProgress';
 import { NO_ASSIGNED_DEFAULT_ROLES_TEXT } from '../../Shared/constants';
 import { NoAssignedRoles } from '../../Shared/NoAssignedRoles/NoAssignedRoles';
 

packages/manager/src/features/IAM/Roles/Defaults/DefaultsLanding.tsx

@@ -4,14 +4,14 @@ import { Outlet, useLocation, useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { LandingHeader } from 'src/components/LandingHeader';
-import { SuspenseLoader } from 'src/components/SuspenseLoader';
 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 { useIsIAMEnabled } from '../../hooks/useIsIAMEnabled';
 import { IAM_LABEL } from '../../Shared/constants';
+import { SuspenseLoader } from '../../Shared/SuspenseLoader/SuspenseLoader';
 
 export const DefaultsLanding = () => {
   const location = useLocation();

packages/manager/src/features/IAM/Roles/Roles.test.tsx

@@ -52,7 +52,7 @@ describe('RolesLanding', () => {
 
     renderWithTheme(<RolesLanding />);
 
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    expect(screen.getByTestId('circle-progress')).toBeInTheDocument();
   });
 
   it('renders roles table when permissions are loaded', async () => {

packages/manager/src/features/IAM/Roles/Roles.tsx

@@ -1,8 +1,9 @@
 import { useAccountRoles } from '@linode/queries';
-import { CircleProgress, Notice, Paper, Typography } from '@linode/ui';
+import { Notice, Paper, Typography } from '@linode/ui';
 import React from 'react';
 
 import { RolesTable } from 'src/features/IAM/Roles/RolesTable/RolesTable';
+import { CircleProgress } from 'src/features/IAM/Shared/CircleProgress/CircleProgress';
 import { mapAccountPermissionsToRoles } from 'src/features/IAM/Shared/utilities';
 
 import { useDelegationRole } from '../hooks/useDelegationRole';

packages/manager/src/features/IAM/Shared/AssignedRolesTable/AssignedRolesTable.tsx

@@ -4,7 +4,7 @@ import {
   useGetDefaultDelegationAccessQuery,
   useUserRoles,
 } from '@linode/queries';
-import { Button, CircleProgress, Typography } from '@linode/ui';
+import { Button, Typography } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import { useNavigate, useParams, useSearch } from '@tanstack/react-router';
@@ -26,6 +26,7 @@ import { useIsDefaultDelegationRolesForChildAccount } from '../../hooks/useDeleg
 import { usePermissions } from '../../hooks/usePermissions';
 import { AssignedEntities } from '../../Users/UserRoles/AssignedEntities';
 import { AssignNewRoleDrawer } from '../../Users/UserRoles/AssignNewRoleDrawer';
+import { CircleProgress } from '../CircleProgress/CircleProgress';
 import {
   ASSIGNED_ROLES_TABLE_PREFERENCE_KEY,
   IAM_ROLES_PENDO_IDS,

packages/manager/src/features/IAM/Shared/CircleProgress/CircleProgress.test.tsx

@@ -0,0 +1,48 @@
+import { screen, waitFor, within } from '@testing-library/react';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { CircleProgress } from './CircleProgress';
+
+const testId = 'circle-progress';
+
+// Helper to get the shadow root of the cds-loading-spinner host element.
+const getShadow = (host: HTMLElement) =>
+  host.shadowRoot as unknown as HTMLElement;
+
+describe('CircleProgress', () => {
+  it('renders', () => {
+    renderWithTheme(<CircleProgress />);
+
+    screen.getByTestId(testId);
+  });
+
+  it('renders a progressbar in its default loading state', async () => {
+    renderWithTheme(<CircleProgress />);
+
+    const host = screen.getByTestId(testId);
+    await waitFor(() => within(getShadow(host)).getByRole('progressbar'));
+  });
+
+  it('renders an img in success state', async () => {
+    renderWithTheme(<CircleProgress state="success" />);
+
+    const host = screen.getByTestId(testId);
+    await waitFor(() => within(getShadow(host)).getByRole('img'));
+  });
+
+  it('has extra-large size by default', () => {
+    renderWithTheme(<CircleProgress />);
+
+    const host = screen.getByTestId(testId) as HTMLElement & { size: string };
+    expect(host.size).toBe('extra-large');
+  });
+
+  it('accepts a custom size', () => {
+    renderWithTheme(<CircleProgress size="small" />);
+
+    const host = screen.getByTestId(testId) as HTMLElement & { size: string };
+    expect(host.size).toBe('small');
+  });
+});

packages/manager/src/features/IAM/Shared/CircleProgress/CircleProgress.tsx

@@ -0,0 +1,53 @@
+import { LoadingSpinner } from '@akamai/cds-components/react/LoadingSpinner';
+import * as React from 'react';
+
+export interface CircleProgressProps {
+  /**
+   * Optional accessible label for the spinner.
+   */
+  label?: string;
+  /**
+   * The size of the spinner.
+   * @default "extra-large"
+   */
+  size?: 'extra-large' | 'large' | 'medium' | 'small';
+  /**
+   * Unique identifier for the spinner element used for aria binding.
+   */
+  spinnerId?: string;
+  /**
+   * The current state of the spinner.
+   * @default "loading"
+   */
+  state?: 'failure' | 'loading' | 'success';
+}
+
+export const CircleProgress = ({
+  label,
+  size = 'extra-large',
+  spinnerId,
+  state = 'loading',
+}: CircleProgressProps) => {
+  return (
+    <div
+      style={{
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'center',
+        margin: '0 auto 20px',
+        position: 'relative',
+        flex: 1,
+        height: 300,
+        width: '100%',
+      }}
+    >
+      <LoadingSpinner
+        data-testid="circle-progress"
+        label={label}
+        size={size}
+        spinnerId={spinnerId}
+        state={state}
+      />
+    </div>
+  );
+};

packages/manager/src/features/IAM/Shared/SuspenseLoader/SuspenseLoader.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { CircleProgress } from '../CircleProgress/CircleProgress';
+
+interface Props {
+  /**
+   * Ammount of time before the CircleProgress shows
+   * @default 300
+   */
+  delay?: number;
+}
+
+export const SuspenseLoader = (props: Props) => {
+  const { delay } = props;
+  const [show, setShow] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => setShow(true), delay ?? 300);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [delay]);
+
+  return <>{show && <CircleProgress />}</>;
+};