Remove spinner reacts

package.json

@@ -27,8 +27,7 @@
     "postcss": "^8.4.17",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-tooltip": "^4.5.1",
-    "spinners-react": "^1.0.7"
+    "react-tooltip": "^4.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",

src/components/Loadable.jsx

@@ -1,6 +1,6 @@
 import React, { useState, cloneElement, Children } from 'react'
 import styles from './Loadable.module.css'
-import { SpinnerCircular } from 'spinners-react'
+import SpinnerCircular from './loaders/SpinnerCircular'
 
 export default function Loadable ({ ...props }) {
   // If null then loading not started, if true then loading, if false then done loading
@@ -22,7 +22,7 @@ export default function Loadable ({ ...props }) {
           ? (
             <>
               <div data-testid='loadable-content' className={styles.relative}>
-                <SpinnerCircular className={styles.spinner} thickness={180} size={60} />
+                <SpinnerCircular className={styles.spinner} size={60} />
                 <div className={styles.blurred}>{children}</div>
               </div>
             </>

src/components/Loadable.module.css

@@ -4,7 +4,7 @@
 }
 
 .spinner {
-    @apply z-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2
+  @apply z-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2
 }
 
 .blurred {

src/components/LoadingSpinner.jsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './LoadingSpinner.module.css'
-import { SpinnerCircular } from 'spinners-react'
+import SpinnerCircular from './loaders/SpinnerCircular'
 
 function LoadingSpinner ({ loading = false }) {
   // If null then loading not started, if true then loading, if false then done loading
   return loading
     ? (
       <div className={styles.container} data-testid='loading-spinner'>
         <div data-testid='loading-spinner-content' className={styles.relative}>
-          <SpinnerCircular className={styles.spinner} thickness={180} size={60} />
+          <SpinnerCircular className={styles.spinner} size={60} />
         </div>
       </div>
       )

src/components/LoadingSpinnerV2.jsx

@@ -2,12 +2,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './LoadingSpinnerV2.module.css'
-import { SpinnerCircular } from 'spinners-react'
+import SpinnerCircular from './loaders/SpinnerCircular'
 
 function LoadingSpinnerV2 ({
   loading = false,
   applySentences = {},
-  color = '#FFFFFF',
+  spinnerProps = {},
   containerClassName = ''
 }) {
   const defaultContainerClassName = containerClassName || `${styles.container}`
@@ -16,7 +16,7 @@ function LoadingSpinnerV2 ({
     ? (
       <div className={defaultContainerClassName} data-testid='loading-spinner'>
         <div className={styles.content}>
-          <SpinnerCircular thickness={180} size={80} color={color} />
+          <SpinnerCircular {...spinnerProps} />
           {applySentences?.sentences.length > 0 && (
             <div className={applySentences.containerClassName}>
               {applySentences.sentences.map((sentence, index) => (<p key={index} className={sentence.style}>{sentence.text}</p>))}
@@ -37,9 +37,14 @@ LoadingSpinnerV2.propTypes = {
    */
   applySentences: PropTypes.object,
   /**
-   * color
+   * spinnerProps
    */
-  color: PropTypes.string,
+  spinnerProps: PropTypes.shape({
+    className: PropTypes.string,
+    color: PropTypes.string,
+    size: PropTypes.number,
+    thickness: PropTypes.number
+  }),
   /**
    * containerClassName
    */

src/components/loaders/SpinnerCircular.jsx

@@ -0,0 +1,52 @@
+'use strict'
+// https://loading.io/css/
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './SpinnerCircular.module.css'
+import { COLORS_BUTTON, WHITE } from '../constants'
+
+function SpinnerCircular ({
+  className = '',
+  color = WHITE,
+  size = 60,
+  thickness = 4
+}) {
+  const styleRing = { width: `${size}px`, height: `${size}px` }
+  const styleDiv = {
+    width: `${size - 16}px`,
+    height: `${size - 16}px`,
+    margin: `${thickness}px`,
+    borderWidth: `${thickness}px`
+  }
+
+  const spinnerClassName = styles[`ring${color}`] + ` ${styles.ring} ${className}`
+  return (
+    <div className={spinnerClassName} style={styleRing}>
+      <div style={styleDiv} />
+      <div style={styleDiv} />
+      <div style={styleDiv} />
+      <div style={styleDiv} />
+    </div>
+  )
+}
+
+SpinnerCircular.propTypes = {
+  /**
+   * className
+   */
+  className: PropTypes.string,
+  /**
+   * color
+   */
+  color: PropTypes.oneOf(COLORS_BUTTON),
+  /**
+   * size
+   */
+  size: PropTypes.number,
+  /**
+   * thickness
+   */
+  thickness: PropTypes.number
+}
+
+export default SpinnerCircular

src/components/loaders/SpinnerCircular.module.css

@@ -0,0 +1,34 @@
+.ringwhite {
+  color: white;
+}
+.ring,
+.ring div {
+  box-sizing: border-box;
+}
+.ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  border-style: solid;
+  border-color: currentColor;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: currentColor transparent transparent transparent;
+}
+.ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/stories/LoadingSpinner.stories.jsx

@@ -12,19 +12,20 @@ export default {
 }
 
 export const Loading = (args) => (
-  <LoadingSpinner {...args}>
+  <>
+    <LoadingSpinner {...args} />
     <BorderedBox>{loremIpsum}</BorderedBox>
-  </LoadingSpinner>
+  </>
 )
 
 Loading.args = {
   loading: true
 }
 
-export const LoadsAndStops = ({ loading, ...args }) => {
-  const [showLoadingSpoinner, setShowLoadingSpoinner] = useState(args.loading)
-  const show = () => setShowLoadingSpoinner(true)
-  const hide = () => setShowLoadingSpoinner(false)
+export const LoadsAndStops = ({ loading }) => {
+  const [showLoadingSoinner, setShowLoadingSpinner] = useState(loading)
+  const show = () => setShowLoadingSpinner(true)
+  const hide = () => setShowLoadingSpinner(false)
 
   function load () {
     show()
@@ -35,10 +36,12 @@ export const LoadsAndStops = ({ loading, ...args }) => {
   }
 
   return (
-    <LoadingSpinner loading={showLoadingSpoinner} {...args}>
+    <>
+      <LoadingSpinner loading={showLoadingSoinner} />
       <Button label='Start Loading' color='error-red' onClick={() => load()} />
       <BorderedBox>{loremIpsum}</BorderedBox>
-    </LoadingSpinner>
+    </>
+
   )
 }
 LoadsAndStops.args = {