Merge pull request #368 from lujakob/feat/add-spinner-to-button

Feat/add spinner to button

packages/app/src/Element/AsyncButton.css

@@ -0,0 +1,14 @@
+button {
+  position: relative;
+}
+
+.spinner-wrapper {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

packages/app/src/Element/AsyncButton.tsx

@@ -1,6 +1,9 @@
+import "./AsyncButton.css";
 import { useState } from "react";
+import Spinner from "../Icons/Spinner";
 
 interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  disabled?: boolean;
   onClick(e: React.MouseEvent): Promise<void> | void;
   children?: React.ReactNode;
 }
@@ -9,7 +12,7 @@ export default function AsyncButton(props: AsyncButtonProps) {
   const [loading, setLoading] = useState<boolean>(false);
 
   async function handle(e: React.MouseEvent) {
-    if (loading) return;
+    if (loading || props.disabled) return;
     setLoading(true);
     try {
       if (typeof props.onClick === "function") {
@@ -24,8 +27,13 @@ export default function AsyncButton(props: AsyncButtonProps) {
   }
 
   return (
-    <button type="button" disabled={loading} {...props} onClick={handle}>
-      {props.children}
+    <button className="spinner-button" type="button" disabled={loading || props.disabled} {...props} onClick={handle}>
+      <span style={{ visibility: loading ? "hidden" : "visible" }}>{props.children}</span>
+      {loading && (
+        <span className="spinner-wrapper">
+          <Spinner />
+        </span>
+      )}
     </button>
   );
 }

packages/app/src/Pages/settings/Profile.tsx

@@ -16,6 +16,7 @@ import { HexKey } from "@snort/nostr";
 import useFileUpload from "Upload";
 
 import messages from "./messages";
+import AsyncButton from "../../Element/AsyncButton";
 
 export interface ProfileSettingsProps {
   avatar?: boolean;
@@ -166,9 +167,9 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
         <div className="form-group card">
           <div></div>
           <div>
-            <button type="button" onClick={() => saveProfile()}>
+            <AsyncButton onClick={() => saveProfile()}>
               <FormattedMessage {...messages.Save} />
-            </button>
+            </AsyncButton>
           </div>
         </div>
       </div>