From 0b7d070146c249db822a2215d068f6f7c4b60ac8 Mon Sep 17 00:00:00 2001
From: Lukas Jakob <lu.jakob@googlemail.com>
Date: Mon, 27 Feb 2023 09:20:49 -0600
Subject: [PATCH] refactor(AsyncButton): add loader

---
 packages/app/src/Element/AsyncButton.css | 27 ++++++++++++++++++++++++
 packages/app/src/Element/AsyncButton.tsx | 25 +++++++++++++++++++++-
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 packages/app/src/Element/AsyncButton.css

diff --git a/packages/app/src/Element/AsyncButton.css b/packages/app/src/Element/AsyncButton.css
new file mode 100644
index 0000000..0f8fef5
--- /dev/null
+++ b/packages/app/src/Element/AsyncButton.css
@@ -0,0 +1,27 @@
+button {
+  position: relative;
+}
+
+.spinner {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation-name: spin;
+  animation-duration: 800ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/packages/app/src/Element/AsyncButton.tsx b/packages/app/src/Element/AsyncButton.tsx
index 59bdaf8..34e6e10 100644
--- a/packages/app/src/Element/AsyncButton.tsx
+++ b/packages/app/src/Element/AsyncButton.tsx
@@ -1,3 +1,4 @@
+import "./AsyncButton.css";
 import { useState } from "react";
 
 interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -5,6 +6,27 @@ interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
   children?: React.ReactNode;
 }
 
+interface LoaderProps {
+  className: string
+}
+
+const Loader = ({ className }: LoaderProps ) => (
+  <div className={className}>
+    <svg
+      width="13"
+      height="14"
+      viewBox="0 0 13 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.38798 12.616C3.36313 12.2306 2.46328 11.5721 1.78592 10.7118C1.10856 9.85153 0.679515 8.82231   0.545268 7.73564C0.411022 6.64897 0.576691 5.54628 1.02433 4.54704C1.47197 3.54779 2.1845 2.69009 3.08475   2.06684C3.98499 1.4436 5.03862 1.07858 6.13148 1.01133C7.22435 0.944078 8.31478 1.17716 9.28464    1.68533C10.2545 2.19349 11.0668 2.95736 11.6336 3.89419C12.2004 4.83101 12.5 5.90507 12.5 7"
+        stroke="white"
+      />
+    </svg>
+  </div>
+)
+
 export default function AsyncButton(props: AsyncButtonProps) {
   const [loading, setLoading] = useState<boolean>(false);
 
@@ -25,7 +47,8 @@ export default function AsyncButton(props: AsyncButtonProps) {
 
   return (
     <button type="button" disabled={loading} {...props} onClick={handle}>
-      {props.children}
+      <span style={{visibility: (loading ? "hidden" : "visible")}}>{props.children}</span>
+      {loading && <Loader className="spinner" />}
     </button>
   );
 }