feat: adds spinner component extracted from HOC

Author: itofarina

src/components/atoms/Spinner.tsx

@@ -0,0 +1,42 @@
+import { makeStyles } from '@material-ui/core/styles'
+import React, { FC } from 'react'
+import { logoBlueIcon } from '../../assets/images'
+
+export type SpinnerProps = {
+  className?: string
+}
+
+const useStyles = makeStyles(() => ({
+  '@keyframes spin': {
+    '0%': { transform: 'rotate(0deg)' },
+    '100%': { transform: 'rotate(360deg)' },
+  },
+  overlay: {
+    zIndex: 2,
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    background: '#FFFFFF55',
+  },
+  spinner: {
+    display: 'inline-block',
+    zIndex: 3,
+    width: '50px',
+    height: '50px',
+    border: 'none',
+    animation: '$spin 2s ease-in-out infinite',
+  },
+}))
+
+const Spinner: FC<SpinnerProps> = ({ className = '' }) => {
+  const classes = useStyles()
+  return (
+    <div className={`${classes.overlay} ${className}`}>
+      <img className={classes.spinner} src={logoBlueIcon} alt="logo" />
+    </div>
+  )
+}
+
+export default Spinner

src/components/atoms/index.ts

@@ -5,6 +5,7 @@ import Logo from './Logo'
 import LogoNavbar from './LogoNavbar'
 import StyledNavTab from './StyledNavTab'
 import NetworkIndicator from './NetworkIndicator'
+import Spinner from './Spinner'
 
 export * from './modal'
 
@@ -16,4 +17,5 @@ export {
   LogoNavbar,
   StyledNavTab,
   NetworkIndicator,
+  Spinner,
 }

src/components/hoc/WithSpinner.tsx

@@ -1,32 +1,13 @@
 import React from 'react'
 import { makeStyles } from '@material-ui/core/styles'
-import { logoBlueIcon } from '../../assets/images'
+import RIFSpinner from '../atoms/Spinner'
 
 const useStyles = makeStyles(() => ({
-  '@keyframes spin': {
-    '0%': { transform: 'rotate(0deg)' },
-    '100%': { transform: 'rotate(360deg)' },
-  },
   root: {
     position: 'relative',
   },
-  overlay: {
+  spinnerWrapper: {
     position: 'absolute',
-    zIndex: 2,
-    height: '100%',
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    background: '#FFFFFF55',
-  },
-  spinner: {
-    display: 'inline-block',
-    zIndex: 3,
-    width: '50px',
-    height: '50px',
-    border: 'none',
-    animation: '$spin 2s ease-in-out infinite',
   },
 }))
 
@@ -39,9 +20,7 @@ const WithSpinner = (WrappedComponent: React.ElementType) => {
         {
           isLoading
           && (
-            <div className={classes.overlay}>
-              <img className={classes.spinner} src={logoBlueIcon} alt="logo" />
-            </div>
+            <RIFSpinner className={classes.spinnerWrapper} />
           )
         }
         <WrappedComponent {...props} />