Add loading button state

src/assets/loading-circles.svg

@@ -0,0 +1,5 @@
+<svg width="46" height="10" viewBox="0 0 46 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="5.04515" cy="4.99974" r="4.51487"/>
+    <circle cx="23.0051" cy="5.00511" r="4.51487"/>
+    <circle cx="40.9651" cy="5.00511" r="4.51487"/>
+</svg>

src/components/button/Button.module.scss

@@ -41,4 +41,46 @@
   left: 50%;
 
   transform: translateX(-50%);
+  transition: opacity 100ms;
+}
+
+.loadingCircles {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  svg {
+    overflow: visible;
+
+    @for $i from 1 through 3 {
+      :nth-child(#{$i}) {
+        animation-delay: calc(7 * #{$i}0ms);
+      }
+    }
+  }
+
+  * circle {
+    fill: black;
+
+    animation: bounce 1s infinite;
+  }
+}
+
+@keyframes bounce {
+  0% {
+    transform: translateY(0%);
+  }
+
+  30% {
+    transform: translateY(50%);
+  }
+
+  70% {
+    transform: translateY(-50%);
+  }
+
+  100% {
+    transform: translateY(0%);
+  }
 }

src/components/button/Button.tsx

@@ -1,11 +1,27 @@
-import React from "react";
+import React, { useRef } from "react";
 import styles from "./Button.module.scss";
+import { ReactComponent } from "../../assets/svgr-custom";
+// @ts-ignore
+import { ReactComponent as LoadingCircles } from "../../assets/loading-circles.svg";
 
-const Button: React.FC<{ children: any }> = ({ children }) => {
+interface ButtonProps {
+  loading?: boolean;
+  icon?: typeof ReactComponent;
+  children: any;
+}
+
+const Button: React.FC<ButtonProps> = ({ children, loading, icon }) => {
   return (
     <button className={styles.button}>
       <div className={styles.background}></div>
-      <div className={styles.children}>{children}</div>
+      <div style={{ opacity: loading ? 0 : 1 }} className={styles.children}>
+        {children}
+      </div>
+      {loading && (
+        <span className={styles.loadingCircles}>
+          <LoadingCircles />
+        </span>
+      )}
     </button>
   );
 };

src/stories/Button.stories.tsx

@@ -12,4 +12,5 @@ export const defaultButton = Template.bind({});
 
 defaultButton.args = {
   children: "Test",
+  loading: false,
 };