loader on undelegating and unlocking buttons (#154)

delegit-xyz · Sep 18, 2024 · e7fe7f5 · e7fe7f5
1 parent 93de301
commit e7fe7f5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/components/LocksCard.tsx b/src/components/LocksCard.tsx
@@ -142,8 +142,9 @@ export const LocksCard = () => {
               className="mb-2 mt-4 w-full"
               onClick={onUnlockClick}
               disabled={isUnlockingLoading}
+              loading={isUnlockingLoading}
             >
-              Unlock
+              {isUnlockingLoading ? 'Unlocking...' : 'Unlock'}
             </Button>
           )}
           <ContentReveal hidden={freeLocks.length == 0}>

diff --git a/src/components/MyDelegations.tsx b/src/components/MyDelegations.tsx
@@ -47,10 +47,10 @@ export const MyDelegations = () => {
     (delegate: string) => {
       if (!api || !selectedAccount || !delegations) return
 
-      const tracks = delegations[delegate].map((d) => d.trackId)
-
       setDelegatesLoading((prev) => [...prev, delegate])
 
+      const tracks = delegations[delegate].map((d) => d.trackId)
+
       // @ts-expect-error we can't strongly type this
       let tx: Transaction<undefined, unknown, unknown, undefined>
 
@@ -72,6 +72,7 @@ export const MyDelegations = () => {
           refreshLocks()
         },
       })
+
       tx.signSubmitAndWatch(selectedAccount.polkadotSigner).subscribe(
         subscriptionCallback,
       )
@@ -100,6 +101,7 @@ export const MyDelegations = () => {
           Object.entries(delegationsByDelegateConvictionAmount).map(
             ([delegateAddress, amountConvictionMap]) => {
               const knownDelegate = getDelegateByAddress(delegateAddress)
+              const isUndelegating = delegateLoading.includes(delegateAddress)
 
               return (
                 <Card
@@ -132,9 +134,10 @@ export const MyDelegations = () => {
                       className="w-a bottom-0 mb-2 mt-4"
                       variant={'outline'}
                       onClick={() => onUndelegate(delegateAddress)}
-                      disabled={delegateLoading.includes(delegateAddress)}
+                      disabled={isUndelegating}
+                      loading={isUndelegating}
                     >
-                      Undelegate
+                      {isUndelegating ? 'Undelegating...' : 'Undelegate'}
                     </Button>
                   </>
                 </Card>