Updated @kyper/progressindicators to MXUI CircularProgress

package.json

@@ -45,7 +45,6 @@
     "@emotion/styled": "^11.14.1",
     "@kyper/hooks": "^1.0.0",
     "@kyper/icon": "^1.18.1",
-    "@kyper/progressindicators": "^3.1.0",
     "@kyper/tokenprovider": "^4.0.1",
     "@mui/icons-material": "^6.1.5",
     "@mui/material": "^6.1.5",

src/components/LoadingSpinner-test.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import { render, screen } from 'src/utilities/testingLibrary'
+import { LoadingSpinner } from 'src/components/LoadingSpinner'
+
+describe('LoadingSpinner', () => {
+  it('renders a progressbar by default', () => {
+    render(<LoadingSpinner />)
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
+  })
+
+  it('does not render the loading text by default', () => {
+    render(<LoadingSpinner />)
+
+    expect(screen.queryByText('Loading ...')).not.toBeInTheDocument()
+  })
+
+  it('renders the loading text when showText is true', () => {
+    render(<LoadingSpinner showText={true} />)
+
+    expect(screen.getByText('Loading ...')).toBeInTheDocument()
+  })
+
+  it('does not render the loading text when showText is false', () => {
+    render(<LoadingSpinner showText={false} />)
+
+    expect(screen.queryByText('Loading ...')).not.toBeInTheDocument()
+  })
+
+  it('renders the spinner at the default size of 48px', () => {
+    render(<LoadingSpinner />)
+
+    const spinner = screen.getByRole('progressbar')
+    expect(spinner).toHaveStyle({ width: '48px', height: '48px' })
+  })
+
+  it('renders the spinner at a custom size', () => {
+    render(<LoadingSpinner size={24} />)
+
+    const spinner = screen.getByRole('progressbar')
+    expect(spinner).toHaveStyle({ width: '24px', height: '24px' })
+  })
+})

src/components/LoadingSpinner.js

@@ -1,46 +1,28 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Spinner } from '@kyper/progressindicators'
-import { useTokens } from '@kyper/tokenprovider'
+import { Stack } from '@mui/material'
+import { Text } from '@mxenabled/mxui'
+import CircularProgress from '@mui/material/CircularProgress'
+
+import styles from './LoadingSpinner.module.css'
 import { __ } from 'src/utilities/Intl'
 
 export const LoadingSpinner = ({ showText = false, size = 48 }) => {
-  const tokens = useTokens()
-  const styles = getStyles(tokens)
-
   return (
-    <div style={styles.container}>
-      <Spinner
-        bgColor={tokens.BackgroundColor.Container}
-        fgColor={tokens.Color.Brand300}
-        size={size}
-      />
-      {showText && <div style={styles.text}>{__('Loading ...')}</div>}
+    <div className={styles.container}>
+      <Stack spacing={2}>
+        <CircularProgress color="primary" size={size} />
+        {showText && (
+          <Text className={styles.text} variant="caption">
+            {__('Loading ...')}
+          </Text>
+        )}
+      </Stack>
     </div>
   )
 }
 
-const getStyles = (tokens) => {
-  return {
-    container: {
-      backgroundColor: tokens.BackgroundColor.Container,
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    text: {
-      color: '#999',
-      fontSize: tokens.FontSize.Tiny,
-      fontWeight: tokens.FontWeight.SemiBold,
-      textAlign: 'center',
-      marginTop: '16px',
-    },
-  }
-}
-
 LoadingSpinner.propTypes = {
   showText: PropTypes.bool,
   size: PropTypes.number,

src/components/LoadingSpinner.module.css

@@ -0,0 +1,12 @@
+.container {
+  background-color: var(--mui-palette-background-paper);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.text {
+  text-align: center;
+}

src/views/connecting/progress/ProgressBar.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTokens } from '@kyper/tokenprovider'
-import { Spinner } from '@kyper/progressindicators'
+import CircularProgress from '@mui/material/CircularProgress'
 
 import { ProgressLine } from 'src/views/connecting/progress/ProgressLine'
 import { ProgressCheckMark } from 'src/views/connecting/progress/ProgressCheckMark'
@@ -33,7 +33,7 @@ export const ProgressBar = ({
   if (jobSchedule.isInitialized === false) {
     return (
       <div style={styles.container}>
-        <Spinner bgColor="transparent" fgColor={tokens.TextColor.Active} />
+        <CircularProgress size={64} sx={{ color: tokens.TextColor.Active }} />
       </div>
     )
   }

src/views/connecting/progress/ProgressCircle.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { useTokens } from '@kyper/tokenprovider'
-import { Spinner } from '@kyper/progressindicators'
+import CircularProgress from '@mui/material/CircularProgress'
 
 import { JOB_STATUSES } from 'src/const/consts'
 
@@ -29,7 +29,7 @@ export const ProgressCircle = (props) => {
   if (isActive) {
     circleContent = (
       <div style={circleStyle}>
-        <Spinner bgColor="transparent" fgColor={tokens.TextColor.Active} size={16} />
+        <CircularProgress size={16} sx={{ color: tokens.TextColor.Active }} />
       </div>
     )
   } else if (isDone) {

src/views/microdeposits/Verifying-test.tsx

@@ -104,7 +104,7 @@ describe('Verifying', () => {
       expect(screen.getByTestId('checking-amounts-paragraph')).toHaveTextContent(
         'Checking microdeposit amounts.',
       )
-      expect(document.querySelector('[data-ui-test="kyper-spinner"]')).toBeInTheDocument()
+      expect(screen.getByRole('progressbar')).toBeInTheDocument()
     })
   })
 

typings/kyper.d.ts

@@ -10,6 +10,5 @@ declare module '@kyper/icon/Dollar'
 declare module '@kyper/icon/Growth'
 declare module '@kyper/icon/Image'
 declare module '@kyper/icon/Health'
-declare module '@kyper/progressindicators'
 declare module '@kyper/hooks'
 declare module '@kyper/icon/CheckmarkFilled'