loading on subscription page

assets/javascripts/discourse/controllers/patrons-subscribe-show.js.es6

@@ -13,9 +13,12 @@ export default Ember.Controller.extend({
 
   actions: {
     stripePaymentHandler() {
+      this.set("loading", true);
+
       this.stripe.createToken(this.get("cardElement")).then(result => {
         if (result.error) {
           bootbox.alert(result.error.message);
+          this.set("loading", false);
         } else {
           const customerData = {
             source: result.token.id
@@ -33,15 +36,20 @@ export default Ember.Controller.extend({
               subscription.set("plan", this.get("model.plans.firstObject.id"));
             }
 
-            subscription.save().then(() => {
-              bootbox.alert(
-                I18n.t("discourse_patrons.transactions.payment.success")
-              );
-              this.transitionToRoute(
-                "user.subscriptions",
-                Discourse.User.current().username.toLowerCase()
-              );
-            });
+            subscription
+              .save()
+              .then(() => {
+                bootbox.alert(
+                  I18n.t("discourse_patrons.transactions.payment.success")
+                );
+                this.transitionToRoute(
+                  "user.subscriptions",
+                  Discourse.User.current().username.toLowerCase()
+                );
+              })
+              .finally(() => {
+                this.set("loading", false);
+              });
           });
         }
       });

assets/javascripts/discourse/templates/patrons/subscribe/show.hbs

@@ -12,6 +12,7 @@
     {{combo-box valueAttribute="id" content=model.plans value=model.product.plan}}
 
     {{#d-button
+      disabled=loading
       action="stripePaymentHandler"
       class="btn btn-primary btn-payment btn-discourse-patrons"}}
       {{i18n 'discourse_patrons.subscribe.buttons.subscribe'}}
@@ -19,14 +20,14 @@
 
     <hr>
 
-    <h4>{{i18n 'discourse_patrons.subscribe.card.title'}}</h4>
+    <h4>
+      {{i18n 'discourse_patrons.subscribe.card.title'}}
+    </h4>
+
     {{subscribe-card cardElement=cardElement}}
 
-    {{!-- <div id="discourse-patrons-subscribe-customer">
-      <h4>{{i18n 'discourse_patrons.subscribe.customer.title'}}</h4>
-      <div class="discourse-patrons-subscribe-customer-empty">
-        {{i18n 'discourse_patrons.subscribe.customer.empty'}}
-      </div>
-    </div> --}}
+    {{#if loading}}
+      {{loading-spinner}}
+    {{/if}}
   </div>
 </div>