From 8c2500c93f3ca4783888efbee61773a13e64ae34 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 2 May 2018 18:52:03 +0200
Subject: [PATCH] add a loader when transaction is sent

* closes #135
---
 _src/_assets/javascripts/page-getstarted.js |  6 ++++
 _src/_assets/styles/_page-getstarted.scss   |  4 +++
 _src/_assets/styles/bigchain.scss           |  1 +
 _src/_assets/styles/bigchain/_buttons.scss  |  4 +++
 _src/_assets/styles/bigchain/_loader.scss   | 31 +++++++++++++++++++++
 5 files changed, 46 insertions(+)
 create mode 100644 _src/_assets/styles/bigchain/_loader.scss

diff --git a/_src/_assets/javascripts/page-getstarted.js b/_src/_assets/javascripts/page-getstarted.js
index 594b49b..87ada69 100644
--- a/_src/_assets/javascripts/page-getstarted.js
+++ b/_src/_assets/javascripts/page-getstarted.js
@@ -117,11 +117,14 @@ window.addEventListener('DOMContentLoaded', function domload(event) {
         }
     })
 
+    postButton.style.width = `${postButton.offsetWidth}px`
+
     postButton.addEventListener('click', function(e) {
         e.preventDefault()
 
         const message = messageInput.value
         postButton.classList.add('disabled')
+        postButton.innerHTML = '<span class="loader loader--dark"></span>'
 
         const alice = new driver.Ed25519Keypair()
         const tx = driver.Transaction.makeCreateTransaction(
@@ -165,6 +168,9 @@ window.addEventListener('DOMContentLoaded', function domload(event) {
 
             const outputContent = reason.status + ' ' + reason.statusText
             output.textContent = outputContent
+
+            postButton.classList.remove('disabled')
+            postButton.innerHTML = 'Off you go'
         }).then((res) => console.log('Transaction status:', res.status))
 
     }, false)
diff --git a/_src/_assets/styles/_page-getstarted.scss b/_src/_assets/styles/_page-getstarted.scss
index d59e7d7..326880d 100644
--- a/_src/_assets/styles/_page-getstarted.scss
+++ b/_src/_assets/styles/_page-getstarted.scss
@@ -36,6 +36,10 @@
     .form-group:first-child {
         margin-top: 0;
     }
+
+    .message {
+        text-align: left;
+    }
 }
 
 .form--transaction__content {
diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss
index 9c2e4f2..4e98451 100644
--- a/_src/_assets/styles/bigchain.scss
+++ b/_src/_assets/styles/bigchain.scss
@@ -16,6 +16,7 @@
 // Components
 @import 'bigchain/typography';
 @import 'bigchain/tables';
+@import 'bigchain/loader';
 @import 'bigchain/buttons';
 @import 'bigchain/forms';
 @import 'bigchain/input-group';
diff --git a/_src/_assets/styles/bigchain/_buttons.scss b/_src/_assets/styles/bigchain/_buttons.scss
index fdbba0e..24d680e 100644
--- a/_src/_assets/styles/bigchain/_buttons.scss
+++ b/_src/_assets/styles/bigchain/_buttons.scss
@@ -47,6 +47,10 @@
         margin-right: .25rem;
         margin-bottom: -1px;
     }
+
+    .loader {
+        margin-bottom: -.2rem;
+    }
 }
 
 // Future-proof disabling of clicks on `<a>` elements
diff --git a/_src/_assets/styles/bigchain/_loader.scss b/_src/_assets/styles/bigchain/_loader.scss
new file mode 100644
index 0000000..91e50e7
--- /dev/null
+++ b/_src/_assets/styles/bigchain/_loader.scss
@@ -0,0 +1,31 @@
+.loader {
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    font-size: 1rem;
+    text-indent: -9999rem;
+    border-top: 2px solid rgba(#fff, .2);
+    border-right: 2px solid rgba(#fff, .2);
+    border-bottom: 2px solid rgba(#fff, .2);
+    border-left: 2px solid #fff;
+    transform: translateZ(0);
+    animation: spin 1.1s infinite linear;
+    display: inline-block;
+}
+
+.loader--dark {
+    border-top-color: rgba($brand-main-blue, .2);
+    border-right-color: rgba($brand-main-blue, .2);
+    border-bottom-color: rgba($brand-main-blue, .2);
+    border-left-color: $brand-main-blue;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}