[taler-wallet-core] 02/02: disable button when wating for response

[gnunet]

This is an automated email from the git hooks/post-receive script.

sebasjm pushed a commit to branch master
in repository wallet-core.

commit 23bb82f00cc83541527402bdd2d4309c530df674
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Thu Aug 18 12:48:05 2022 -0300

    disable button when wating for response
---
 .../src/mui/Button.stories.tsx                     | 27 ++++++++++++++++++++++
 .../taler-wallet-webextension/src/mui/Button.tsx   | 17 ++++++++++++--
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx 
b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
index 8f6b47af..385eb102 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
@@ -39,6 +39,33 @@ const Stack = styled.div`
   background-color: white;
 `;
 
+export const WithDelay = (): VNode => (
+  <Stack>
+    <Button
+      size="small"
+      variant="contained"
+      onClick={() =>
+        new Promise((resolve) => {
+          setTimeout(resolve, 2000);
+        })
+      }
+    >
+      Returns after 2 seconds
+    </Button>
+    <Button
+      size="small"
+      variant="contained"
+      onClick={() =>
+        new Promise((_, reject) => {
+          setTimeout(reject, 2000);
+        })
+      }
+    >
+      Fails after 2 seconds
+    </Button>
+  </Stack>
+);
+
 export const BasicExample = (): VNode => (
   <Fragment>
     <Stack>
diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx 
b/packages/taler-wallet-webextension/src/mui/Button.tsx
index 2f12c172..0aaa5ee9 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Button.tsx
@@ -19,6 +19,7 @@ import { css } from "@linaria/core";
 import { theme, Colors, rippleEnabled, rippleEnabledOutlined } from "./style";
 // eslint-disable-next-line import/extensions
 import { alpha } from "./colors/manipulation";
+import { useState } from "preact/hooks";
 
 export const buttonBaseStyle = css`
   display: inline-flex;
@@ -219,7 +220,7 @@ export function Button({
   size = "medium",
   style: parentStyle,
   color = "primary",
-  onClick,
+  onClick: doClick,
 }: Props): VNode {
   const style = css`
     user-select: none;
@@ -275,9 +276,21 @@ export function Button({
       }}
     />
   );
+  const [running, setRunning] = useState(false);
+
+  async function onClick(): Promise<void> {
+    if (!doClick || disabled || running) return;
+    setRunning(true);
+    try {
+      await doClick();
+    } finally {
+      setRunning(false);
+    }
+  }
+
   return (
     <ButtonBase
-      disabled={disabled}
+      disabled={disabled || running}
       class={[
         theme.typography.button,
         theme.shape.roundBorder,

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.