ui update

src/main/ui/static/css/cardpay.css

@@ -117,4 +117,68 @@
     width: 100%;
     text-align: center;
     border: none;
+}
+
+.loading-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(255, 255, 255, .4);
+    display: block;
+}
+.loading-container.hide{
+    display: none;
+}
+
+.loading-container > .loading-box {
+    position: relative;
+    margin: auto;
+    background: #fff;
+}
+
+.loading-container > .loading-box > .loading-text {
+    display: block;
+    text-align: center;
+    font-size: 2em;
+}
+
+.loading-container .loading {
+    position: relative;
+    margin: 0 auto;
+    width: 100px;
+    height: 100px;
+}
+
+.loading-container .loading span {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    background-color: #3498db;
+    margin: 35px 5px;
+    opacity: 0;
+}
+
+.loading-container .loading span:nth-child(1) {
+    animation: opacitychange 1s ease-in-out infinite;
+}
+
+.loading-container .loading span:nth-child(2) {
+    animation: opacitychange 1s ease-in-out 0.33s infinite;
+}
+
+.loading-container .loading span:nth-child(3) {
+    animation: opacitychange 1s ease-in-out 0.66s infinite;
+}
+
+@keyframes opacitychange {
+    0%, 100% {
+        opacity: 0;
+    }
+
+    60% {
+        opacity: 1;
+    }
 }

src/main/ui/static/templates/payment/v1/card_pay.js

@@ -3,8 +3,11 @@ $(function () {
     let ctrl = {ready: false, pending: false}
     let cardFrame = window.channel_account_id ? new TokenInputFrame($container, window.channel_account_id) : new CardInputFrame($container);
     let $errorMsgBox = $('#errorMsgBox');
+    let loading = $('.loading-container');
     cardFrame.onSuccess = function (secretData) {
         ctrl.pending = true;
+        loading.find('.loading-text').text('Paying...');
+        loading.removeClass('hide');
         $.ajax({
             url: 'commit',
             data: JSON.stringify(secretData),
@@ -15,6 +18,7 @@ $(function () {
             },
             error: function (jqXHR) {
                 ctrl.pending = false;
+                loading.addClass('hide')
                 let errorText = jqXHR.responseText;
                 let err = JSON.parse(errorText);
                 if (err) {
@@ -33,6 +37,7 @@ $(function () {
         $('#readyModal').hide();
         $('#payBtn').removeAttr('disabled');
         ctrl.ready = true;
+        loading.addClass('hide');
     };
     cardFrame.onError = function (msg) {
         $errorMsgBox.text(msg).show();