feat: disable the button if loading status is true

decentraland · Jan 2, 2024 · 7342da6 · 7342da6
1 parent a65dc04
commit 7342da6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.module.css b/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.module.css
@@ -37,6 +37,7 @@
   height: 100%;
   text-align: start;
   margin-left: 38px;
+  justify-content: center;
 }
 
 .claimNamePage .buttons > div + div :global(.ui.button:hover) {
@@ -49,7 +50,7 @@
 }
 
 .claimNamePage .buttons :global(.button) {
-  margin-top: auto;
+  margin-top: 16px;
 }
 
 .claimNamePage .buttons :global(.ui.button + .ui.button) {
@@ -70,6 +71,7 @@
 .claimNamePage .cardsContainer :global(.ui.button.inverted) {
   background-color: white;
   color: #161518;
+  margin-top: 12px;
 }
 
 .claimNamePage .nameTakenCard {

diff --git a/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.tsx b/webapp/src/components/NamesPage/ClaimNamePage/ClaimNamePage.tsx
@@ -315,7 +315,9 @@ const ClaimNamePage = (props: Props) => {
                 <Button
                   primary
                   onClick={handleClaim}
-                  disabled={!isAvailable || nameInvalidType !== null}
+                  disabled={
+                    isLoadingStatus || !isAvailable || nameInvalidType !== null
+                  }
                 >
                   {t('names_page.claim_a_name')}
                 </Button>