From c5b1029e4f2db6bf5973930104171ca8cb257e60 Mon Sep 17 00:00:00 2001
From: Stephan <57194608+stephan418@users.noreply.github.com>
Date: Mon, 3 Oct 2022 20:56:01 +0200
Subject: [PATCH] Add loading button state

---
 src/assets/loading-circles.svg           |  5 +++
 src/components/button/Button.module.scss | 42 ++++++++++++++++++++++++
 src/components/button/Button.tsx         | 22 +++++++++++--
 src/stories/Button.stories.tsx           |  1 +
 4 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/loading-circles.svg

diff --git a/src/assets/loading-circles.svg b/src/assets/loading-circles.svg
new file mode 100644
index 0000000..b69ce60
--- /dev/null
+++ b/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>
diff --git a/src/components/button/Button.module.scss b/src/components/button/Button.module.scss
index 3a851f7..67980bf 100644
--- a/src/components/button/Button.module.scss
+++ b/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%);
+  }
 }
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index 92f512c..7c241c6 100644
--- a/src/components/button/Button.tsx
+++ b/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>
   );
 };
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index 709ecca..232461e 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -12,4 +12,5 @@ export const defaultButton = Template.bind({});
 
 defaultButton.args = {
   children: "Test",
+  loading: false,
 };