refactor: [M3-8827] - Migrate CircleProgress to ui package (#11214)

Author: jaalah-akamai

packages/manager/.changeset/pr-11214-removed-1730844124766.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+Migrate CircleProgress to ui package ([#11214](https://github.com/linode/manager/pull/11214))

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

@@ -1,3 +1,4 @@
+import { CircleProgress } from '@linode/ui';
 import { Box, InputAdornment } from '@linode/ui';
 import CloseIcon from '@mui/icons-material/Close';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -6,7 +7,6 @@ import React from 'react';
 
 import { TextField } from 'src/components/TextField';
 
-import { CircleProgress } from '../CircleProgress';
 import {
   CustomPopper,
   SelectedIcon,

packages/manager/src/components/CircleProgress/index.ts

@@ -1,11 +1,11 @@
+import { CircleProgress } from '@linode/ui';
 import { IconButton, InputAdornment } from '@linode/ui';
 import Clear from '@mui/icons-material/Clear';
 import Search from '@mui/icons-material/Search';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { debounce } from 'throttle-debounce';
 
-import { CircleProgress } from 'src/components/CircleProgress';
 import { TextField } from 'src/components/TextField';
 
 import type { TextFieldProps } from 'src/components/TextField';

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

@@ -1,8 +1,6 @@
-import { Notice } from '@linode/ui';
+import { CircleProgress, Notice } from '@linode/ui';
 import * as React from 'react';
 
-import { CircleProgress } from 'src/components/CircleProgress';
-
 export interface DrawerContentProps {
   children: React.ReactNode;
   error: boolean;

packages/manager/src/components/DrawerContent/DrawerContent.tsx

@@ -1,8 +1,7 @@
+import { CircleProgress } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { CircleProgress } from 'src/components/CircleProgress';
-
 export const LoadingIndicator = () => {
   return <StyledCircleProgress data-testid="input-loading" size="sm" />;
 };

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

@@ -1,9 +1,7 @@
-import { Box } from '@linode/ui';
+import { Box, CircleProgress } from '@linode/ui';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { CircleProgress } from 'src/components/CircleProgress';
-
 import { StyledLinkButton } from './Button/StyledLinkButton';
 
 import type { Theme } from '@mui/material/styles';

packages/manager/src/components/LinkButton.tsx

@@ -1,7 +1,6 @@
+import { CircleProgress } from '@linode/ui';
 import * as React from 'react';
 
-import { CircleProgress } from 'src/components/CircleProgress';
-
 interface State {
   [name: string]: any;
   loading: boolean;
@@ -22,6 +21,21 @@ export interface PromiseLoaderResponse<T> {
 export default function preload<P>(requests: RequestMap<P>) {
   return function (Component: React.ComponentType<P>) {
     return class LoadedComponent extends React.Component<P, State> {
+      static displayName = `PromiseLoader(${
+        Component.displayName || Component.name
+      })`;
+      handleDone = () => {
+        if (!this.mounted) {
+          return;
+        }
+
+        this.setState((prevState) => ({ ...prevState, loading: false }));
+      };
+
+      mounted: boolean = false;
+
+      state = { loading: true };
+
       componentDidMount() {
         this.mounted = true;
         const promises = Object.entries(requests).map(([name, request]) =>
@@ -50,6 +64,7 @@ export default function preload<P>(requests: RequestMap<P>) {
 
         Promise.all(promises).then(this.handleDone).catch(this.handleDone);
       }
+
       componentWillUnmount() {
         this.mounted = false;
       }
@@ -62,22 +77,6 @@ export default function preload<P>(requests: RequestMap<P>) {
 
         return <Component {...this.props} {...responses} />;
       }
-
-      static displayName = `PromiseLoader(${
-        Component.displayName || Component.name
-      })`;
-
-      handleDone = () => {
-        if (!this.mounted) {
-          return;
-        }
-
-        this.setState((prevState) => ({ ...prevState, loading: false }));
-      };
-
-      mounted: boolean = false;
-
-      state = { loading: true };
     };
   };
 }

packages/manager/src/components/PromiseLoader/PromiseLoader.tsx

@@ -1,7 +1,6 @@
-import { Box } from '@linode/ui';
+import { Box, CircleProgress } from '@linode/ui';
 import * as React from 'react';
 
-import { CircleProgress } from 'src/components/CircleProgress';
 import { srSpeak } from 'src/utilities/accessibility';
 
 export const SplashScreen = () => {

packages/manager/src/components/SplashScreen.tsx

@@ -1,7 +1,6 @@
+import { CircleProgress } from '@linode/ui';
 import * as React from 'react';
 
-import { CircleProgress } from 'src/components/CircleProgress';
-
 interface Props {
   /**
    * Ammount of time before the CircleProgress shows