spinner when submitting forms

8 files changed, 86 insertions, 0 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 1e23693..e689134 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -982,6 +982,7 @@ header .search_form {
 }
 
 /* 404 */
+
 #error_404 {
   display: none;
   margin: 10px 0;
@@ -990,6 +991,82 @@ header .search_form {
   font-size: 16px;
 }
 
+/* loader */
+
+.sending input[type=submit],
+.sending button {
+  display: none !important;
+}
+.sending input[type=submit] + .loader,
+.sending button + .loader {
+  display: block;
+}
+.loader {
+  display: none;
+  position: relative;
+  width: 19px;
+  height: 19px;
+  margin-left: 13px;
+  color: #987;
+}
+.loader:after {
+  position: absolute;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  content: " ";
+  display: inline-block;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 0.15em;
+  -webkit-background-clip: padding-box;
+  border-color: currentColor currentColor currentColor transparent;
+  box-sizing: border-box;
+  -webkit-animation: ld-cycle 0.8s infinite linear;
+  animation: ld-cycle 0.8s infinite linear;
+}
+@-webkit-keyframes ld-cycle {
+  0%, 50%, 100% {
+    animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5);
+  }
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  50% {
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes ld-cycle {
+  0%, 50%, 100% {
+    animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5);
+  }
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  50% {
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+
+/* mobile css and errata */
+
 @media (min-width: 700px) and (max-width: 1000px) {
   #sidebar {
     display: none;
diff --git a/public/assets/js/vendor/view/formview.js b/public/assets/js/vendor/view/formview.js
index 97d16fe..21f3170 100644
--- a/public/assets/js/vendor/view/formview.js
+++ b/public/assets/js/vendor/view/formview.js
@@ -97,6 +97,7 @@ var FormView = View.extend({
       headers.append("content-type", "application/json")
     }
     
+    this.$form.addClass('sending')
     fetch(action, {
       method: this.method.toUpperCase(),
       headers: headers,
@@ -104,6 +105,7 @@ var FormView = View.extend({
       body: data,
     }).then(raw => raw.json())
     .then(response => {
+      this.$form.removeClass('sending')
       if (response.error) {
         var errors = []
         if (response.error.errors && response.error.errors.length) {
@@ -129,6 +131,7 @@ var FormView = View.extend({
       }
     }).catch(response => {
       console.log(response)
+      this.$form.removeClass('sending')
       var errors = []
       if (response.error) {
         if (response.error.errors && response.error.errors.length) {
diff --git a/views/pages/comment_form.ejs b/views/pages/comment_form.ejs
index 97a8402..4365b75 100644
--- a/views/pages/comment_form.ejs
+++ b/views/pages/comment_form.ejs
@@ -9,6 +9,7 @@
         <textarea name="comment" placeholder="Enter your comment"></textarea><br>
         <div class="inputs">
           <input type="submit" value="POST" />
+          <div class="loader"></div>
         </div>
         <div class="errors"></div>
       </form>
diff --git a/views/pages/compose.ejs b/views/pages/compose.ejs
index d7b1a49..e3e7eb0 100644
--- a/views/pages/compose.ejs
+++ b/views/pages/compose.ejs
@@ -22,6 +22,7 @@
         <div class="buttons">
 <!--           <button id="save_draft" style="opacity: 0.5">SAVE DRAFT</button> -->
           <input type="submit" value="SEND MESSAGE" />
+          <div class="loader"></div>
         </div>
         <div class="errors"></div>
       </form>
diff --git a/views/pages/post.ejs b/views/pages/post.ejs
index 2889905..8d7ecf6 100644
--- a/views/pages/post.ejs
+++ b/views/pages/post.ejs
@@ -13,6 +13,7 @@
           <select name="keyword" id="keywords">
           </select>
           <input type="submit" value="POST" />
+          <div class="loader"></div>
         </div>
         <div class="errors"></div>
       </form>
diff --git a/views/pages/profile_form.ejs b/views/pages/profile_form.ejs
index 4606ce4..6cdc312 100644
--- a/views/pages/profile_form.ejs
+++ b/views/pages/profile_form.ejs
@@ -75,6 +75,7 @@
     <div class="save_field">
       <label for="profile-submit"></label>
       <button id="profile-submit">SAVE PROFILE</button>
+      <div class="loader"></div>
     </div>
 
     <br>
diff --git a/views/partials/comments.ejs b/views/partials/comments.ejs
index 50abe6e..17eb6a5 100644
--- a/views/partials/comments.ejs
+++ b/views/partials/comments.ejs
@@ -32,6 +32,7 @@
         <div class="inputs">
           <input name="files" type="file" multiple>
           <input type="submit" value="POST" />
+          <div class="loader"></div>
         </div>
         <div class='errors'></div>
       </form>
diff --git a/views/partials/settings.ejs b/views/partials/settings.ejs
index 27ddfa8..bd4a72a 100644
--- a/views/partials/settings.ejs
+++ b/views/partials/settings.ejs
@@ -59,6 +59,7 @@
           <div>
             <label></label>
             <input id="thread_submit" value="Save" type="submit">
+            <div class="loader"></div>
           </div>
           <div>
             <label></label>