add loader and fix perk badge zindex

BTCPayServer/Crowdfund/CrowdfundHub.cs

@@ -1,3 +1,4 @@
+using System;
 using System.Threading.Tasks;
 using BTCPayServer.Controllers;
 using BTCPayServer.Models.AppViewModels;
@@ -35,20 +36,30 @@ namespace BTCPayServer.Hubs
         {
                model.RedirectToCheckout = false;
                _AppsPublicController.ControllerContext.HttpContext = Context.GetHttpContext();
-               var result = await _AppsPublicController.ContributeToCrowdfund(Context.Items["app"].ToString(), model);
-               switch (result)
+               try
                {
-                   case OkObjectResult okObjectResult:
-                       await Clients.Caller.SendCoreAsync(InvoiceCreated, new[] {okObjectResult.Value.ToString()});
-                       break;
-                   case ObjectResult objectResult:
-                       await Clients.Caller.SendCoreAsync(InvoiceError, new[] {objectResult.Value});
-                       break;
-                   default:
-                       await Clients.Caller.SendCoreAsync(InvoiceError, System.Array.Empty<object>());
-                       break;
+
+                   var result =
+                       await _AppsPublicController.ContributeToCrowdfund(Context.Items["app"].ToString(), model);
+                   switch (result)
+                   {
+                       case OkObjectResult okObjectResult:
+                           await Clients.Caller.SendCoreAsync(InvoiceCreated, new[] {okObjectResult.Value.ToString()});
+                           break;
+                       case ObjectResult objectResult:
+                           await Clients.Caller.SendCoreAsync(InvoiceError, new[] {objectResult.Value});
+                           break;
+                       default:
+                           await Clients.Caller.SendCoreAsync(InvoiceError, System.Array.Empty<object>());
+                           break;
+                   }
                }
-               
+               catch (Exception)
+               {
+                   await Clients.Caller.SendCoreAsync(InvoiceError, System.Array.Empty<object>());
+
+               }
+
         }
 
     }

BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml

@@ -4,7 +4,7 @@
             <img class="card-img-top" :src="srvModel.mainImageUrl" v-if="srvModel.mainImageUrl">
             <div class="d-flex justify-content-between px-2">
                 <h1>
-                    {{srvModel.title}}
+                    {{srvModel.title}} {{loading}}
                     <span class="h6 text-muted" v-if="!started && srvModel.startDate" v-b-tooltip :title="startDate">
                         Starts {{startDateRelativeTime}}
                     </span>
@@ -157,6 +157,7 @@
                                     <contribute :target-currency="srvModel.targetCurrency"
                                                 :display-perks-ranking="srvModel.displayPerksRanking"
                                                 :active="active"
+                                                :loading="loading"
                                                 :in-modal="false"
                                                 :perks="perks">
     
@@ -178,6 +179,7 @@
                         </div>
                         <div class="col-md-4 col-sm-12">
                             <contribute :target-currency="srvModel.targetCurrency"
+                                        :loading="loading"
                                         :display-perks-ranking="srvModel.displayPerksRanking"
                                         :active="active"
                                         :in-modal="false"
@@ -207,11 +209,11 @@
         </div>
     </div>
     <b-modal title="Contribute" v-model="contributeModalOpen" size="lg" ok-only="true" ok-variant="secondary" ok-title="Close" ref="modalContribute">
-
         <contribute v-if="contributeModalOpen"
                     :target-currency="srvModel.targetCurrency"
                     :active="active"
                     :perks="srvModel.perks"
+                    :loading="loading"
                     :in-modal="true">
         </contribute>
     </b-modal>
@@ -220,10 +222,19 @@
 
 <script type="text/x-template" id="perks-template">
 <div>
-    <perk v-if="!perks || perks.length ===0" :perk="{title: 'Donate Custom Amount', price: { value: null}, custom: true}" :target-currency="targetCurrency" :active="active" 
+    <perk v-if="!perks || perks.length ===0" 
+        :perk="{title: 'Donate Custom Amount', price: { value: null}, custom: true}" 
+        :target-currency="targetCurrency" 
+        :active="active" 
+        :loading="loading"
         :in-modal="inModal">
     </perk>
-    <perk v-for="(perk, index) in perks" :perk="perk" :target-currency="targetCurrency" :active="active" :display-perks-ranking="displayPerksRanking" :index="index"
+    <perk v-for="(perk, index) in perks" :perk="perk" 
+        :target-currency="targetCurrency" 
+        :active="active" 
+        :display-perks-ranking="displayPerksRanking" 
+        :index="index"
+        :loading="loading"
         :in-modal="inModal">
     </perk>
 </div>
@@ -276,8 +287,12 @@
                     <span class='input-group-text'>{{targetCurrency}}</span>
                     <button 
                         class="btn btn-primary" 
-                        :disabled="!active" 
+                        v-bind:class="{ 'btn-disabled': loading}"
+                        :disabled="!active || loading" 
                         type="submit">
+                         <div v-if="loading"  class="spinner-grow spinner-grow-sm"   role="status">
+                            <span class="sr-only">Loading...</span>
+                        </div>
                         Continue
                     </button>
                 </div>
@@ -297,6 +312,7 @@
     <h3 v-if="!inModal" class="mb-3">Contribute</h3>
     <perks 
         :perks="perks" 
+        :loading="loading"
         :in-modal="inModal"
         :display-perks-ranking="displayPerksRanking"
         :target-currency="targetCurrency" 

BTCPayServer/wwwroot/crowdfund/app.js

@@ -18,17 +18,17 @@ addLoadEvent(function (ev) {
     Vue.use(Toasted);
 
     Vue.component('contribute', {
-        props: ["targetCurrency", "active", "perks", "inModal", "displayPerksRanking"],
+        props: ["targetCurrency", "active", "perks", "inModal", "displayPerksRanking", "loading"],
         template: "#contribute-template"
     });
 
     Vue.component('perks', {
-        props: ["perks", "targetCurrency", "active", "inModal","displayPerksRanking"],
+        props: ["perks", "targetCurrency", "active", "inModal","displayPerksRanking", "loading"],
         template: "#perks-template"
     });
 
     Vue.component('perk', {
-        props: ["perk", "targetCurrency", "active", "inModal", "displayPerksRanking", "index"],
+        props: ["perk", "targetCurrency", "active", "inModal", "displayPerksRanking", "index", "loading"],
         template: "#perk-template",
         data: function () {
             return {
@@ -46,7 +46,7 @@ addLoadEvent(function (ev) {
                 if (e) {
                     e.preventDefault();
                 }
-                if(!this.active){
+                if(!this.active || this.loading){
                     return;
                 }
                 
@@ -84,8 +84,9 @@ addLoadEvent(function (ev) {
                 active: true,
                 animation: true, 
                 sound: true,
-                lastUpdated:""
-                
+                lastUpdated:"",
+                loading: false,
+                timeoutState: 0
             }
         },
         computed: {
@@ -194,6 +195,12 @@ addLoadEvent(function (ev) {
             submitModalContribute: function(e){
                 debugger;
                 this.$refs.modalContribute.onContributeFormSubmit(e);
+            },
+            setLoading: function(val){
+                this.loading = val;
+                if(this.timeoutState){
+                    clearTimeout(this.timeoutState);
+                }
             }
         },
         mounted: function () {
@@ -207,8 +214,19 @@ addLoadEvent(function (ev) {
                 btcpay.showFrame();
 
                 self.contributeModalOpen = false;
+                self.setLoading(false);
+            });
+
+            eventAggregator.$on("contribute", function () {
+                self.setLoading(true);
+                
+                self.timeoutState = setTimeout(function(){
+                    self.setLoading(false);
+                },5000);
             });
             eventAggregator.$on("invoice-error", function(error){
+
+                self.setLoading(false);
                 var msg = "";
                 if(typeof error === "string"){
                     msg = error;

BTCPayServer/wwwroot/crowdfund/styles/main.css

@@ -52,4 +52,5 @@ canvas#fireworks {
     left: -15px;
     top: -15px;
     padding-top: 5px;
+    z-index: 1
 }