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/CircleProgress/CircleProgress.tsx

@@ -1,13 +1,12 @@
+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';
 
+import type { CircularProgressProps } from '@mui/material/CircularProgress';
+
 interface CircleProgressProps extends CircularProgressProps {
   /**
    * Additional child elements to pass in
@@ -116,7 +115,7 @@ const StyledTopDiv = styled('div')(({ theme }) => ({
   width: 70,
 }));
 
-const StyledCircularProgress = styled(CircularProgress)<CircleProgressProps>(
+const StyledCircularProgress = styled(_CircularProgress)<CircleProgressProps>(
   ({ theme }) => ({
     position: 'relative',
     [theme.breakpoints.down('sm')]: {
@@ -126,7 +125,7 @@ const StyledCircularProgress = styled(CircularProgress)<CircleProgressProps>(
   })
 );
 
-const StyledMiniCircularProgress = styled(CircularProgress, {
+const StyledMiniCircularProgress = styled(_CircularProgress, {
   shouldForwardProp: omittedProps(['noPadding']),
 })<CircleProgressProps>(({ theme, ...props }) => ({
   padding: `calc(${theme.spacing()} * 1.3)`,

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={20} />;
 };
 
-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 mini noPadding size={12} />
+        </Box>
       </Box>
     );
   }

packages/manager/src/components/MenuItem/MenuItem.tsx

@@ -3,7 +3,6 @@ import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { CircularProgress } from 'src/components/CircularProgress';
 import { IconButton } from 'src/components/IconButton';
 import { MenuItem, MenuItemProps } from 'src/components/MenuItem';
 
@@ -88,9 +87,6 @@ export const WrapperMenuItem = (props: WrapperMenuItemCombinedProps) => {
       {...rest}
       className={`${classes.root} ${className} ${tooltip && 'hasTooltip'}`}
     >
-      {isLoading && (
-        <CircularProgress className={classes.circleProgress} size={20} />
-      )}
       <span className={shouldWrapLabel && classes.labelWrapper}>
         <span className={shouldWrapLabel && classes.label}>
           {props.children}

packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Backups/BackupSelect.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { useController, useWatch } from 'react-hook-form';
 
 import { Box } from 'src/components/Box';
-import { CircularProgress } from 'src/components/CircularProgress';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
+import { LinearProgress } from 'src/components/LinearProgress';
 import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
 import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
@@ -38,11 +38,7 @@ export const BackupSelect = () => {
     }
 
     if (isFetching) {
-      return (
-        <Stack alignItems="center">
-          <CircularProgress />
-        </Stack>
-      );
+      return <LinearProgress />;
     }
 
     if (hasNoBackups) {

packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/AppSelect.tsx

@@ -4,7 +4,7 @@ import { useController, useFormContext } from 'react-hook-form';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { Box } from 'src/components/Box';
-import { CircularProgress } from 'src/components/CircularProgress';
+import { CircleProgress } from 'src/components/CircleProgress';
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Paper } from 'src/components/Paper';
@@ -47,7 +47,7 @@ export const AppSelect = (props: Props) => {
           justifyContent="center"
           width="100%"
         >
-          <CircularProgress />
+          <CircleProgress />
         </Box>
       );
     }

packages/manager/src/features/Linodes/LinodesCreate/SelectAppPanel.tsx

@@ -2,8 +2,8 @@ import { Theme, styled } from '@mui/material/styles';
 import * as React from 'react';
 import { compose } from 'recompose';
 
+import { CircleProgress } from 'src/components/CircleProgress';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
-import { LandingLoading } from 'src/components/LandingLoading/LandingLoading';
 import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
 import { AppPanelSection } from 'src/features/Linodes/LinodesCreate/AppPanelSection';
@@ -75,7 +75,7 @@ class SelectAppPanel extends React.PureComponent<Props> {
       return (
         <StyledPanel error={error} title="Select App">
           <StyledLoadingSpan>
-            <LandingLoading />
+            <CircleProgress />
           </StyledLoadingSpan>
         </StyledPanel>
       );

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx

@@ -1,8 +1,9 @@
-import { Box, CircularProgress, Stack } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
 import { Accordion } from 'src/components/Accordion';
+import { CircleProgress } from 'src/components/CircleProgress';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Notice } from 'src/components/Notice/Notice';
 import { Toggle } from 'src/components/Toggle/Toggle';
@@ -58,7 +59,7 @@ export const LinodeWatchdogPanel = (props: Props) => {
             label={
               <Stack alignItems="center" direction="row" spacing={1}>
                 <Box>{linode?.watchdog_enabled ? 'Enabled' : 'Disabled'}</Box>
-                <Box>{isLoading && <CircularProgress size={16} />}</Box>
+                <Box>{isLoading && <CircleProgress mini />}</Box>
               </Stack>
             }
             disabled={isReadOnly}

packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx

@@ -1,9 +1,9 @@
 import { APIError } from '@linode/api-v4/lib/types';
 import * as React from 'react';
 
+import { CircleProgress } from 'src/components/CircleProgress';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
-import { LandingLoading } from 'src/components/LandingLoading/LandingLoading';
 import { Placeholder } from 'src/components/Placeholder/Placeholder';
 
 import { WithStartAndEnd } from '../../../request.types';
@@ -64,7 +64,7 @@ const Disks = (props: Props) => {
     }
 
     if (loading && Object.keys(diskData).length === 0) {
-      return <LandingLoading />;
+      return <CircleProgress />;
     }
     /*
       Longview doesn't return the Disk stats in any particular order, so sort them

packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.test.tsx

@@ -137,7 +137,7 @@ describe('LongviewPlans', () => {
 
     renderWithTheme(<LongviewPlans {...props} />);
 
-    await waitForElementToBeRemoved(screen.getByTestId('loading'), {
+    await waitForElementToBeRemoved(screen.getByTestId('circle-progress'), {
       timeout: 5000,
     });