From eecccfd636f373cd6180b0d2fb2a5fb020fa5fc6 Mon Sep 17 00:00:00 2001
From: Jeroen <jeroen@adaptiveconstant.com>
Date: Sun, 10 Dec 2023 17:32:49 +0100
Subject: [PATCH] Show spinner when donating

---
 src/framework/visualisation/react/ui/prompts/consent_form.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/framework/visualisation/react/ui/prompts/consent_form.tsx b/src/framework/visualisation/react/ui/prompts/consent_form.tsx
index a7d08ff3..5e1da87e 100644
--- a/src/framework/visualisation/react/ui/prompts/consent_form.tsx
+++ b/src/framework/visualisation/react/ui/prompts/consent_form.tsx
@@ -21,6 +21,7 @@ export const ConsentForm = (props: Props): JSX.Element => {
   const tablesIn = React.useRef<Array<PropsUITable & TableContext>>(parseTables(props.tables))
   const metaTables = React.useRef<Array<PropsUITable & TableContext>>(parseTables(props.metaTables))
   const tablesOut = React.useRef<Array<PropsUITable & TableContext>>(tablesIn.current)
+  const [waiting, setWaiting] = React.useState<boolean>(false)
 
   const { locale, resolve } = props
   const { description, donateQuestion, donateButton, cancelButton } = prepareCopy(props)
@@ -101,6 +102,7 @@ export const ConsentForm = (props: Props): JSX.Element => {
   }
 
   function handleDonate (): void {
+    setWaiting(true)
     const value = serializeConsentData()
     resolve?.({ __type__: 'PayloadJSON', value })
   }
@@ -155,7 +157,7 @@ export const ConsentForm = (props: Props): JSX.Element => {
         <div>
           <BodyLarge margin='' text={donateQuestion} />
           <div className='flex flex-row gap-4 mt-4 mb-4'>
-            <PrimaryButton label={donateButton} onClick={handleDonate} color='bg-success text-white' />
+            <PrimaryButton label={donateButton} onClick={handleDonate} color='bg-success text-white' spinning={waiting} />
             <LabelButton label={cancelButton} onClick={handleCancel} color='text-grey1' />
           </div>
         </div>