spinner on subscription cancel

assets/javascripts/discourse/routes/admin-plugins-discourse-patrons-subscriptions.js.es6

@@ -15,12 +15,17 @@ export default Discourse.Route.extend({
         I18n.t("yes_value"),
         confirmed => {
           if (confirmed) {
+            subscription.set("loading", true);
+
             subscription
               .destroy()
               .then(result => subscription.set("status", result.status))
               .catch(data =>
                 bootbox.alert(data.jqXHR.responseJSON.errors.join("\n"))
-              );
+              )
+              .finally(() => {
+                subscription.set("loading", false);
+              });
           }
         }
       );

assets/javascripts/discourse/routes/user-subscriptions.js.es6

@@ -23,12 +23,17 @@ export default Discourse.Route.extend({
         I18n.t("yes_value"),
         confirmed => {
           if (confirmed) {
+            subscription.set("loading", true);
+
             subscription
               .destroy()
               .then(result => subscription.set("status", result.status))
               .catch(data =>
                 bootbox.alert(data.jqXHR.responseJSON.errors.join("\n"))
-              );
+              )
+              .finally(() => {
+                subscription.set("loading", false);
+              });
           }
         }
       );

assets/javascripts/discourse/templates/admin/plugins-discourse-patrons-subscriptions.hbs

@@ -23,7 +23,13 @@
       <td>{{subscription.plan.id}}</td>
       <td>{{subscription.status}}</td>
       <td class="td-right">{{format-unix-date subscription.created}}</td>
-      <td class="td-right">{{d-button disabled=subscription.canceled label="cancel" action=(route-action "cancelSubscription" subscription) icon="times"}}</td>
+      <td class="td-right">
+        {{#if subscription.loading}}
+          {{loading-spinner size="small"}}
+        {{else}}
+          {{d-button disabled=subscription.canceled label="cancel" action=(route-action "cancelSubscription" subscription) icon="times"}}
+        {{/if}}
+      </td>
     </tr>
   {{/each}}
 </table>

assets/javascripts/discourse/templates/user/subscriptions.hbs

@@ -16,7 +16,13 @@
         <td>{{subscription.plan.subscriptionRate}}</td>
         <td>{{subscription.status}}</td>
         <td>{{format-unix-date subscription.created}}</td>
-        <td class="td-right">{{d-button disabled=subscription.canceled label="cancel" action=(route-action "cancelSubscription" subscription) icon="times"}}</td>
+        <td class="td-right">
+          {{#if subscription.loading}}
+            {{loading-spinner size="small"}}
+          {{else}}
+            {{d-button disabled=subscription.canceled label="cancel" action=(route-action "cancelSubscription" subscription) icon="times"}}
+          {{/if}}
+        </td>
       </tr>
     {{/each}}
   </table>