diff --git a/website/client/components/settings/subscription.vue b/website/client/components/settings/subscription.vue
index 371b4de148..787028630e 100644
--- a/website/client/components/settings/subscription.vue
+++ b/website/client/components/settings/subscription.vue
@@ -68,7 +68,7 @@
 
         div(v-if='hasSubscription')
           .btn.btn-primary(v-if='canEditCardDetails', @click='showStripeEdit()') {{ $t('subUpdateCard') }}
-          .btn.btn-sm.btn-danger(v-if='canCancelSubscription', @click='cancelSubscription()') {{ $t('cancelSub') }}
+          .btn.btn-sm.btn-danger(v-if='canCancelSubscription && !loading', @click='cancelSubscription()') {{ $t('cancelSub') }}
           small(v-if='!canCancelSubscription', v-html='getCancelSubInfo()')
 
         .subscribe-pay(v-if='!hasSubscription || hasCanceledSubscription')
@@ -118,6 +118,7 @@ export default {
   mixins: [paymentsMixin],
   data () {
     return {
+      loading: false,
       gemCostTranslation: {
         gemCost: planGemLimits.convRate,
         gemLimit: planGemLimits.convRate,
diff --git a/website/client/mixins/payments.js b/website/client/mixins/payments.js
index e38fd81d28..07930f8c52 100644
--- a/website/client/mixins/payments.js
+++ b/website/client/mixins/payments.js
@@ -175,6 +175,8 @@ export default {
       if (config && config.group && !confirm(this.$t('confirmCancelGroupPlan'))) return;
       if (!confirm(this.$t('sureCancelSub'))) return;
 
+      this.loading = true;
+
       let group;
       if (config && config.group) {
         group = config.group;
@@ -203,6 +205,9 @@ export default {
 
       let cancelUrl = `/${paymentMethod}/subscribe/cancel?${encodeParams(queryParams)}`;
       await axios.get(cancelUrl);
+
+      this.loading = false;
+
       //  Success
       alert(this.$t('paypalCanceled'));
       this.$router.push('/');