refactor: [M3-8183] - Clean up loading components

packages/manager/.changeset/pr-10524-tech-stories-1716999765184.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Clean up loading components ([#10524](https://github.com/linode/manager/pull/10524))

packages/manager/src/components/Autocomplete/Autocomplete.tsx

@@ -120,7 +120,7 @@ export const Autocomplete = <
               <>
                 {loading && (
                   <InputAdornment position="end">
-                    <CircleProgress mini={true} />
+                    <CircleProgress size="sm" />
                   </InputAdornment>
                 )}
                 {textFieldProps?.InputProps?.endAdornment}

packages/manager/src/components/CircleProgress/CircleProgress.test.tsx

@@ -19,28 +19,20 @@ describe('CircleProgress', () => {
     expect(innerCircle).toBeInTheDocument();
   });
 
-  it('renders a mini CircleProgress', () => {
-    const screen = renderWithTheme(<CircleProgress mini />);
+  it('renders a small CircleProgress', () => {
+    const screen = renderWithTheme(<CircleProgress size="sm" />);
 
     const circleProgress = screen.getByLabelText(CONTENT_LOADING);
     expect(circleProgress).toBeVisible();
     expect(circleProgress).toHaveStyle('width: 40px; height: 40px;');
   });
 
-  it('sets a mini CircleProgress with no padding', () => {
-    const screen = renderWithTheme(<CircleProgress mini noPadding />);
+  it('sets a small CircleProgress with no padding', () => {
+    const screen = renderWithTheme(<CircleProgress noPadding size="sm" />);
 
     const circleProgress = screen.getByLabelText(CONTENT_LOADING);
     expect(circleProgress).toBeVisible();
-    expect(circleProgress).toHaveStyle('width: 22px; height: 22px;');
-  });
-
-  it('sets a mini CircleProgress with a custom size', () => {
-    const screen = renderWithTheme(<CircleProgress mini size={25} />);
-
-    const circleProgress = screen.getByLabelText(CONTENT_LOADING);
-    expect(circleProgress).toBeVisible();
-    expect(circleProgress).toHaveStyle('width: 25px; height: 25px;');
+    expect(circleProgress).toHaveStyle('width: 20px; height: 20px;');
   });
 
   it('renders a CircleProgress without the inner circle', () => {

packages/manager/src/components/CircleProgress/CircleProgress.tsx

@@ -1,58 +1,59 @@
+import _CircularProgress from '@mui/material/CircularProgress';
 import { SxProps, styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
-import {
-  CircularProgress,
-  CircularProgressProps,
-} from 'src/components/CircularProgress';
 import { omittedProps } from 'src/utilities/omittedProps';
 
-interface CircleProgressProps extends CircularProgressProps {
+import type { CircularProgressProps } from '@mui/material/CircularProgress';
+
+interface CircleProgressProps extends Omit<CircularProgressProps, 'size'> {
   /**
    * Additional child elements to pass in
    */
   children?: JSX.Element;
-  /**
-   * Displays a smaller version of the circle progress.
-   */
-  mini?: boolean;
   /**
    * If true, will not show an inner circle beneath the spinning circle
    */
   noInner?: boolean;
   /**
-   * Removes the padding for `mini` circle progresses only.
+   * Removes the padding
    */
   noPadding?: boolean;
   /**
-   * To be primarily used with mini and noPadding. Set spinner to a custom size.
+   * Set spinner to a smaller custom size
    */
-  size?: number;
+  size?: 'md' | 'sm' | 'xs';
   /**
    * Additional styles to apply to the root element.
    */
   sx?: SxProps;
 }
 
+const SIZE_MAP = {
+  md: 40,
+  sm: 20,
+  xs: 14,
+};
+
 /**
  * Use for short, indeterminate activities requiring user attention.
  */
 const CircleProgress = (props: CircleProgressProps) => {
-  const { children, mini, noInner, noPadding, size, sx, ...rest } = props;
+  const { children, noInner, noPadding, size, sx, ...rest } = props;
 
   const variant =
     typeof props.value === 'number' ? 'determinate' : 'indeterminate';
   const value = typeof props.value === 'number' ? props.value : 0;
 
-  if (mini) {
+  if (size) {
     return (
-      <StyledMiniCircularProgress
+      <StyledCustomCircularProgress
         aria-label="Content is loading"
         data-qa-circle-progress
         data-testid="circle-progress"
         noPadding={noPadding}
-        size={size ? size : noPadding ? 22 : 40}
+        size={noPadding ? SIZE_MAP[size] : SIZE_MAP[size] * 2}
         tabIndex={0}
       />
     );
@@ -116,19 +117,17 @@ const StyledTopDiv = styled('div')(({ theme }) => ({
   width: 70,
 }));
 
-const StyledCircularProgress = styled(CircularProgress)<CircleProgressProps>(
-  ({ theme }) => ({
-    position: 'relative',
-    [theme.breakpoints.down('sm')]: {
-      height: '72px !important',
-      width: '72px !important',
-    },
-  })
-);
+const StyledCircularProgress = styled(_CircularProgress)(({ theme }) => ({
+  position: 'relative',
+  [theme.breakpoints.down('sm')]: {
+    height: '72px !important',
+    width: '72px !important',
+  },
+}));
 
-const StyledMiniCircularProgress = styled(CircularProgress, {
+const StyledCustomCircularProgress = styled(_CircularProgress, {
   shouldForwardProp: omittedProps(['noPadding']),
-})<CircleProgressProps>(({ theme, ...props }) => ({
+})<{ noPadding: boolean | undefined }>(({ theme, ...props }) => ({
   padding: `calc(${theme.spacing()} * 1.3)`,
   ...(props.noPadding && {
     padding: 0,

packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx

@@ -82,7 +82,7 @@ export const DebouncedSearchTextField = React.memo(
         InputProps={{
           endAdornment: isSearching ? (
             <InputAdornment position="end">
-              <CircleProgress mini={true} />
+              <CircleProgress size="sm" />
             </InputAdornment>
           ) : (
             clearable &&

packages/manager/src/components/EnhancedSelect/components/LoadingIndicator.tsx

@@ -1,13 +1,13 @@
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { CircularProgress } from 'src/components/CircularProgress';
+import { CircleProgress } from 'src/components/CircleProgress';
 
 export const LoadingIndicator = () => {
-  return <StyledCircularProgress data-testid="input-loading" size={20} />;
+  return <StyledCircleProgress data-testid="input-loading" size="sm" />;
 };
 
-const StyledCircularProgress = styled(CircularProgress)(() => ({
+const StyledCircleProgress = styled(CircleProgress)(() => ({
   position: 'relative',
   right: 20,
 }));

packages/manager/src/components/LinkButton.tsx

@@ -1,20 +1,18 @@
 import { Theme } from '@mui/material/styles';
-import { makeStyles } from 'tss-react/mui';
 import * as React from 'react';
+import { makeStyles } from 'tss-react/mui';
+
+import { CircleProgress } from 'src/components/CircleProgress';
 
 import { Box } from './Box';
 import { StyledLinkButton } from './Button/StyledLinkButton';
-import { CircularProgress } from './CircularProgress';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   disabled: {
     color: theme.palette.text.primary,
     cursor: 'default',
     pointerEvents: 'none',
   },
-  spinner: {
-    marginLeft: theme.spacing(),
-  },
 }));
 
 interface Props {
@@ -58,7 +56,9 @@ export const LinkButton = (props: Props) => {
     return (
       <Box alignItems="center" display="flex">
         {Button}
-        <CircularProgress className={classes.spinner} size={12} />
+        <Box marginLeft={1}>
+          <CircleProgress noPadding size="xs" />
+        </Box>
       </Box>
     );
   }