From 7e50c72ea7f30c9df583b1d458b64f998a0c0398 Mon Sep 17 00:00:00 2001
From: Lukas Jakob <lu.jakob@googlemail.com>
Date: Tue, 28 Feb 2023 07:50:05 -0600
Subject: [PATCH] refactor(AsyncButton): replace spinner

---
 packages/app/src/Element/AsyncButton.css | 15 +--------------
 packages/app/src/Element/AsyncButton.tsx | 24 +++++++-----------------
 2 files changed, 8 insertions(+), 31 deletions(-)

diff --git a/packages/app/src/Element/AsyncButton.css b/packages/app/src/Element/AsyncButton.css
index 0f8fef5..6e544a2 100644
--- a/packages/app/src/Element/AsyncButton.css
+++ b/packages/app/src/Element/AsyncButton.css
@@ -2,7 +2,7 @@ button {
   position: relative;
 }
 
-.spinner {
+.spinner-wrapper {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -11,17 +11,4 @@ button {
   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 3e6f16a..808b655 100644
--- a/packages/app/src/Element/AsyncButton.tsx
+++ b/packages/app/src/Element/AsyncButton.tsx
@@ -1,5 +1,6 @@
 import "./AsyncButton.css";
 import { useState } from "react";
+import Spinner from "../Icons/Spinner";
 
 interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   disabled?: boolean;
@@ -7,21 +8,6 @@ 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);
 
@@ -41,9 +27,13 @@ export default function AsyncButton(props: AsyncButtonProps) {
   }
 
   return (
-    <button type="button" disabled={loading || props.disabled} {...props} onClick={handle}>
+    <button className="spinner-button" type="button" disabled={loading || props.disabled} {...props} onClick={handle}>
       <span style={{ visibility: loading ? "hidden" : "visible" }}>{props.children}</span>
-      {loading && <Loader className="spinner" />}
+      {loading && (
+        <span className="spinner-wrapper">
+          <Spinner />
+        </span>
+      )}
     </button>
   );
 }