Disable Pay and Cancel buttons during loading

src/App.vue

@@ -162,11 +162,10 @@ button {
     color: $btn-text-hover-color;
   }
 
-  &[disabled],
-  &[disabled]:hover {
-    background-color: #ddd;
+  &[disabled] {
+    background-color: #ddd !important;
     box-shadow: none;
-    color: #999;
+    color: #999 !important;
     cursor: initial;
   }
 }

src/components/Subscription.vue

@@ -77,7 +77,12 @@
           <template v-if="!subscriptionState || subscriptionState.senderBalance.isZero()">Pay</template>
           <template v-else>Extend</template>
         </button>
-        <button v-if="canCancel()" class="btn secondary" @click.prevent="onCancelSubscription()">
+        <button
+          v-if="isBalancePositive()"
+          class="btn secondary"
+          :disabled="!canCancel()"
+          @click.prevent="onCancelSubscription()"
+        >
           Cancel
         </button>
       </div>
@@ -227,7 +232,7 @@ function getPaymentAmount(): FixedNumber {
 }
 
 function canPay(): boolean {
-  if (!subscription || !tokenBalance) {
+  if (!subscription || !tokenBalance || isLoading) {
     return false
   }
   const amount = subscription.pricePerMonthInt.mul(paymentDuration)
@@ -278,13 +283,17 @@ async function onMakeSubscriptionPayment() {
   isLoading = false
 }
 
-function canCancel(): boolean {
+function isBalancePositive(): boolean {
   return (
     subscriptionState !== null &&
     !subscriptionState.senderBalance.isZero()
   )
 }
 
+function canCancel(): boolean {
+  return isBalancePositive() && !isLoading
+}
+
 async function onCancelSubscription() {
   if (
     !instance?.blockchain_contract_address ||