From 0b7d070146c249db822a2215d068f6f7c4b60ac8 Mon Sep 17 00:00:00 2001 From: Lukas Jakob Date: Mon, 27 Feb 2023 09:20:49 -0600 Subject: [PATCH 1/5] 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 { @@ -5,6 +6,27 @@ interface AsyncButtonProps extends React.ButtonHTMLAttributes children?: React.ReactNode; } +interface LoaderProps { + className: string +} + +const Loader = ({ className }: LoaderProps ) => ( +
+ + + +
+) + export default function AsyncButton(props: AsyncButtonProps) { const [loading, setLoading] = useState(false); @@ -25,7 +47,8 @@ export default function AsyncButton(props: AsyncButtonProps) { return ( ); } From 57f86812b3cc6d2b0d87f390363db96a0db2658a Mon Sep 17 00:00:00 2001 From: Lukas Jakob Date: Mon, 27 Feb 2023 09:23:00 -0600 Subject: [PATCH 2/5] refactor(Profile): add AsyncButton --- packages/app/src/Pages/settings/Profile.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/app/src/Pages/settings/Profile.tsx b/packages/app/src/Pages/settings/Profile.tsx index 728487d..3ff9f30 100644 --- a/packages/app/src/Pages/settings/Profile.tsx +++ b/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) {
- +
From 4e9408ee3ef0104f0205f28f883dc6298eb2039a Mon Sep 17 00:00:00 2001 From: Lukas Jakob Date: Mon, 27 Feb 2023 09:24:31 -0600 Subject: [PATCH 3/5] refactor(AsyncButton): add disabled property --- packages/app/src/Element/AsyncButton.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/app/src/Element/AsyncButton.tsx b/packages/app/src/Element/AsyncButton.tsx index 34e6e10..c130ab2 100644 --- a/packages/app/src/Element/AsyncButton.tsx +++ b/packages/app/src/Element/AsyncButton.tsx @@ -2,6 +2,7 @@ import "./AsyncButton.css"; import { useState } from "react"; interface AsyncButtonProps extends React.ButtonHTMLAttributes { + disabled?: boolean; onClick(e: React.MouseEvent): Promise | void; children?: React.ReactNode; } @@ -31,7 +32,7 @@ export default function AsyncButton(props: AsyncButtonProps) { const [loading, setLoading] = useState(false); async function handle(e: React.MouseEvent) { - if (loading) return; + if (loading || props.disabled) return; setLoading(true); try { if (typeof props.onClick === "function") { @@ -46,7 +47,7 @@ export default function AsyncButton(props: AsyncButtonProps) { } return ( - From b1e7a202f39f7207121fd7b1b4ef977a2868b8e7 Mon Sep 17 00:00:00 2001 From: Lukas Jakob Date: Mon, 27 Feb 2023 09:53:44 -0600 Subject: [PATCH 4/5] Fix format --- packages/app/src/Element/AsyncButton.tsx | 16 +++++----------- packages/app/src/Pages/settings/Profile.tsx | 2 +- 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/app/src/Element/AsyncButton.tsx b/packages/app/src/Element/AsyncButton.tsx index c130ab2..3e6f16a 100644 --- a/packages/app/src/Element/AsyncButton.tsx +++ b/packages/app/src/Element/AsyncButton.tsx @@ -8,25 +8,19 @@ interface AsyncButtonProps extends React.ButtonHTMLAttributes } interface LoaderProps { - className: string + className: string; } -const Loader = ({ className }: LoaderProps ) => ( +const Loader = ({ className }: LoaderProps) => (
- +
-) +); export default function AsyncButton(props: AsyncButtonProps) { const [loading, setLoading] = useState(false); @@ -48,7 +42,7 @@ export default function AsyncButton(props: AsyncButtonProps) { return ( ); diff --git a/packages/app/src/Pages/settings/Profile.tsx b/packages/app/src/Pages/settings/Profile.tsx index 3ff9f30..6fda55b 100644 --- a/packages/app/src/Pages/settings/Profile.tsx +++ b/packages/app/src/Pages/settings/Profile.tsx @@ -16,7 +16,7 @@ import { HexKey } from "@snort/nostr"; import useFileUpload from "Upload"; import messages from "./messages"; -import AsyncButton from '../../Element/AsyncButton'; +import AsyncButton from "../../Element/AsyncButton"; export interface ProfileSettingsProps { avatar?: boolean; From 7e50c72ea7f30c9df583b1d458b64f998a0c0398 Mon Sep 17 00:00:00 2001 From: Lukas Jakob Date: Tue, 28 Feb 2023 07:50:05 -0600 Subject: [PATCH 5/5] 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 { disabled?: boolean; @@ -7,21 +8,6 @@ interface AsyncButtonProps extends React.ButtonHTMLAttributes children?: React.ReactNode; } -interface LoaderProps { - className: string; -} - -const Loader = ({ className }: LoaderProps) => ( -
- - - -
-); - export default function AsyncButton(props: AsyncButtonProps) { const [loading, setLoading] = useState(false); @@ -41,9 +27,13 @@ export default function AsyncButton(props: AsyncButtonProps) { } return ( - ); }