From d16cca9a025691b87628baa4b796ba1ae6f0cc54 Mon Sep 17 00:00:00 2001
From: AbhinavMV <mvabhinav1998@gmail.com>
Date: Thu, 15 Dec 2022 22:59:32 +0530
Subject: [PATCH] chore: custom wave loader

---
 .changeset/fluffy-ducks-own.md                 |  5 +++++
 .../core/src/lib/Loading/Loading.stories.tsx   |  7 +++++++
 .../core/src/lib/Loading/Loading.styles.tsx    | 18 ++++++++++++------
 packages/core/src/lib/Loading/Loading.tsx      |  9 ++++++++-
 packages/core/src/lib/Loading/types.ts         |  3 +++
 5 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/fluffy-ducks-own.md

diff --git a/.changeset/fluffy-ducks-own.md b/.changeset/fluffy-ducks-own.md
new file mode 100644
index 000000000..3aa318a52
--- /dev/null
+++ b/.changeset/fluffy-ducks-own.md
@@ -0,0 +1,5 @@
+---
+'@web3uikit/core': patch
+---
+
+Custom size for wave loader
diff --git a/packages/core/src/lib/Loading/Loading.stories.tsx b/packages/core/src/lib/Loading/Loading.stories.tsx
index 8f379d91b..5ffc534c6 100644
--- a/packages/core/src/lib/Loading/Loading.stories.tsx
+++ b/packages/core/src/lib/Loading/Loading.stories.tsx
@@ -54,3 +54,10 @@ WaveLoaderWithText.args = {
     text: 'Loading...',
     fontSize: 12,
 };
+
+export const WaveLoaderCustomSize = Template.bind({});
+WaveLoaderCustomSize.args = {
+    spinnerType: 'wave',
+    spinnerColor: '#2E7DAF',
+    waveSize: 100,
+};
diff --git a/packages/core/src/lib/Loading/Loading.styles.tsx b/packages/core/src/lib/Loading/Loading.styles.tsx
index 5dc7bda3c..48fb28b19 100644
--- a/packages/core/src/lib/Loading/Loading.styles.tsx
+++ b/packages/core/src/lib/Loading/Loading.styles.tsx
@@ -49,9 +49,15 @@ export const StyledSpinnerDiv = styled.div<
 
 // const DivStyledWaveLoader = styled.div<Pick<ILoadingProps, 'size' | 'spinnerColor'>>`
 
-const waveAnim = keyframes`
-    from {height: 2px; width: 2px;}
-    to {height: 7px;width: 7px;}
+const waveAnim = (size?: number) => keyframes`
+    from {
+        height: ${size ? Math.ceil(size / 4) + 'px' : '2px'}; 
+        width: ${size ? Math.ceil(size / 4) + 'px' : '2px'};
+    }
+    to {
+        height: ${size ? size + 'px' : '7px'};
+        width: ${size ? size + 'px' : '7px'};
+    }
 `;
 
 export const DivStyledWaveLoader = styled.div<ILoadingProps>`
@@ -62,15 +68,15 @@ export const DivStyledWaveLoader = styled.div<ILoadingProps>`
     span {
         align-items: center;
         display: flex;
-        height: 10px;
+        height: ${(p) => (p.waveSize ? `${p.waveSize + 3}px` : '10px')};
         justify-content: center;
-        width: 10px;
+        width: ${(p) => (p.waveSize ? `${p.waveSize + 3}px` : '10px')};
 
         &:before {
             animation-direction: alternate;
             animation-duration: 0.4s;
             animation-iteration-count: infinite;
-            animation-name: ${waveAnim};
+            animation-name: ${(p) => waveAnim(p.waveSize)};
             background-color: ${(props) => props.spinnerColor};
             border-radius: 50%;
             content: '';
diff --git a/packages/core/src/lib/Loading/Loading.tsx b/packages/core/src/lib/Loading/Loading.tsx
index 7be3f1015..9e0e8a7fd 100644
--- a/packages/core/src/lib/Loading/Loading.tsx
+++ b/packages/core/src/lib/Loading/Loading.tsx
@@ -13,6 +13,7 @@ const Loading: React.FC<ILoadingProps> = ({
     spinnerColor = color.white,
     spinnerType = 'loader',
     text,
+    waveSize,
     ...props
 }) => {
     return (
@@ -28,7 +29,11 @@ const Loading: React.FC<ILoadingProps> = ({
             {spinnerType == 'loader' ? (
                 <StyledSpinnerDiv spinnerColor={spinnerColor} size={size} />
             ) : (
-                <WaveLoader size={size} spinnerColor={spinnerColor} />
+                <WaveLoader
+                    size={size}
+                    spinnerColor={spinnerColor}
+                    waveSize={waveSize}
+                />
             )}
             {text && <span>{text}</span>}
         </StyledSpinnerParent>
@@ -38,6 +43,7 @@ const Loading: React.FC<ILoadingProps> = ({
 const WaveLoader: React.FC<ILoadingProps> = ({
     size,
     spinnerColor,
+    waveSize,
     ...props
 }) => (
     <DivStyledWaveLoader
@@ -47,6 +53,7 @@ const WaveLoader: React.FC<ILoadingProps> = ({
         role="alert"
         size={size}
         spinnerColor={spinnerColor}
+        waveSize={waveSize}
         {...props}
     >
         <span aria-hidden="true" id="anim-delay1"></span>
diff --git a/packages/core/src/lib/Loading/types.ts b/packages/core/src/lib/Loading/types.ts
index f7c40b03e..136fa37bc 100644
--- a/packages/core/src/lib/Loading/types.ts
+++ b/packages/core/src/lib/Loading/types.ts
@@ -16,4 +16,7 @@ export interface ILoadingProps {
 
     // To load text with spinner
     text?: string;
+
+    // The size of the wave loader
+    waveSize?: number;
 }