Merge pull request #368 from lujakob/feat/add-spinner-to-button
Feat/add spinner to button
This commit is contained in:
commit
10e96bddb5
14
packages/app/src/Element/AsyncButton.css
Normal file
14
packages/app/src/Element/AsyncButton.css
Normal file
@ -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;
|
||||||
|
}
|
@ -1,6 +1,9 @@
|
|||||||
|
import "./AsyncButton.css";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
import Spinner from "../Icons/Spinner";
|
||||||
|
|
||||||
interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
|
disabled?: boolean;
|
||||||
onClick(e: React.MouseEvent): Promise<void> | void;
|
onClick(e: React.MouseEvent): Promise<void> | void;
|
||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
}
|
}
|
||||||
@ -9,7 +12,7 @@ export default function AsyncButton(props: AsyncButtonProps) {
|
|||||||
const [loading, setLoading] = useState<boolean>(false);
|
const [loading, setLoading] = useState<boolean>(false);
|
||||||
|
|
||||||
async function handle(e: React.MouseEvent) {
|
async function handle(e: React.MouseEvent) {
|
||||||
if (loading) return;
|
if (loading || props.disabled) return;
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
if (typeof props.onClick === "function") {
|
if (typeof props.onClick === "function") {
|
||||||
@ -24,8 +27,13 @@ export default function AsyncButton(props: AsyncButtonProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button type="button" disabled={loading} {...props} onClick={handle}>
|
<button className="spinner-button" type="button" disabled={loading || props.disabled} {...props} onClick={handle}>
|
||||||
{props.children}
|
<span style={{ visibility: loading ? "hidden" : "visible" }}>{props.children}</span>
|
||||||
|
{loading && (
|
||||||
|
<span className="spinner-wrapper">
|
||||||
|
<Spinner />
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -16,6 +16,7 @@ import { HexKey } from "@snort/nostr";
|
|||||||
import useFileUpload from "Upload";
|
import useFileUpload from "Upload";
|
||||||
|
|
||||||
import messages from "./messages";
|
import messages from "./messages";
|
||||||
|
import AsyncButton from "../../Element/AsyncButton";
|
||||||
|
|
||||||
export interface ProfileSettingsProps {
|
export interface ProfileSettingsProps {
|
||||||
avatar?: boolean;
|
avatar?: boolean;
|
||||||
@ -166,9 +167,9 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
|
|||||||
<div className="form-group card">
|
<div className="form-group card">
|
||||||
<div></div>
|
<div></div>
|
||||||
<div>
|
<div>
|
||||||
<button type="button" onClick={() => saveProfile()}>
|
<AsyncButton onClick={() => saveProfile()}>
|
||||||
<FormattedMessage {...messages.Save} />
|
<FormattedMessage {...messages.Save} />
|
||||||
</button>
|
</AsyncButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user