Update style for loading button

Signed-off-by: Leonardo Rossi <[email protected]>

Author: leorossi

src/components/Button.jsx

@@ -12,7 +12,7 @@ import {
   ACTIVE_AND_INACTIVE_STATUS,
   TRANSPARENT
 } from './constants'
-import SpinnerCircular from './loaders/SpinnerCircular'
+import SpinnerCircularV2 from './loaders/SpinnerCircularV2'
 
 function Button ({
   textClass = '',
@@ -111,7 +111,8 @@ function Button ({
   return (
     <button className={`${buttonClassName} ${restClassName()} ${borderedClassName}`} disabled={disabled} alt={label} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
       <div className={`${contentClassName} ${backgroundClassName}`}>
-        {loading ? <SpinnerCircular className={styles.spinner} size={30} thickness={2} color={color} /> : null}
+        {loading ? <SpinnerCircularV2 className={styles.spinner} size={28} thickness={1} color={color} /> : null}
+
         {platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} inactive={inactive} /> : null}
         <span className={styles.label}>{label}</span>
         {platformaticIconAfter ? <PlatformaticIcon key='right' iconName={platformaticIconAfter.iconName} color={platformaticIconAfter.color} data-testid='button-icon' onClick={null} inactive={inactive} /> : null}

src/components/Button.module.css

@@ -147,5 +147,5 @@
   @apply cursor-default;
 }
 .spinner {
-  @apply z-50 relative top-[20px] left-[20px] transform -translate-x-1/2 -translate-y-1/2
+  @apply z-50 relative transform -translate-x-1/2 -translate-y-1/2
 }

src/components/LoadingSpinner.jsx

@@ -2,13 +2,13 @@ import React from 'react'
 import styles from './LoadingSpinner.module.css'
 import SpinnerCircular from './loaders/SpinnerCircular'
 
-function LoadingSpinner ({ loading = false }) {
+function LoadingSpinner ({ loading = false, size = 60 }) {
   // 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} size={60} />
+          <SpinnerCircular className={styles.spinner} size={size} />
         </div>
       </div>
       )

src/components/loaders/SpinnerCircularV2.jsx

@@ -0,0 +1,31 @@
+// https://loading.io/css/
+import React from 'react'
+import styles from './SpinnerCircularV2.module.css'
+import { WHITE } from '../constants'
+
+function SpinnerCircular ({
+  className = '',
+  color = WHITE,
+  size = 60,
+  thickness = 4
+}) {
+  const styleRing = { width: `${size / 4}px`, height: `${size / 4}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>
+  )
+}
+
+export default SpinnerCircular

src/components/loaders/SpinnerCircularV2.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/Button.stories.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Button from '../components/Button'
 import {
   ALTERNATE_RICH_BLACK,
@@ -676,3 +676,22 @@ LoadingButton.args = {
   label: 'Loading Button',
   loading: true
 }
+
+export const ClickToLoad = (args) => {
+  const [loading, setLoading] = useState(false)
+  return (
+    <Button
+      label='Click to Load'
+      loading={loading}
+      onClick={() => {
+        setLoading(true)
+        setTimeout(() => setLoading(false), 2000)
+      }}
+    />
+  )
+}
+
+ClickToLoad.args = {
+  label: 'Click to Load',
+  loading: false
+}